ให้ตัวเลือกแก่ผู้ใช้

เช่นเดียวกับที่ส่วนขยายช่วยให้ผู้ใช้ปรับแต่งเบราว์เซอร์ Chrome ได้ หน้าตัวเลือกจะช่วยให้ปรับแต่งส่วนขยายได้ ใช้ตัวเลือกเพื่อเปิดใช้ฟีเจอร์และอนุญาตให้ผู้ใช้เลือก ฟังก์ชันที่เกี่ยวข้องกับความต้องการของตน

การค้นหาหน้าตัวเลือก

ผู้ใช้เข้าถึงหน้าตัวเลือกได้โดยใช้ลิงก์โดยตรง หรือคลิกขวาที่ไอคอนส่วนขยายในแถบเครื่องมือ แล้วเลือกตัวเลือก นอกจากนี้ ผู้ใช้ยังไปที่หน้าตัวเลือกได้โดยเปิด chrome://extensions ก่อน จากนั้นค้นหาส่วนขยายที่ต้องการ คลิกรายละเอียด แล้วเลือกตัวเลือก "ลิงก์"

ลิงก์หน้าตัวเลือกในอินเทอร์เฟซผู้ใช้
ลิงก์ไปยังหน้าตัวเลือก
หน้าตัวเลือกเมนูตามบริบท
คลิกขวาที่ไอคอนของส่วนขยาย

เขียนหน้าตัวเลือก

ตัวอย่างหน้าตัวเลือกมีดังนี้

options.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>
    <select id="color">
      <option value="red">red</option>
      <option value="green">green</option>
      <option value="blue">blue</option>
      <option value="yellow">yellow</option>
    </select>

    <label>
      <input type="checkbox" id="like" />
      I like colors.
    </label>

    <div id="status"></div>
    <button id="save">Save</button>

    <script src="options.js"></script>
  </body>
</html>

ด้านล่างนี้คือตัวอย่างสคริปต์ตัวเลือก บันทึกไว้ในโฟลเดอร์เดียวกับ options.html ซึ่งจะบันทึกตัวเลือกที่ผู้ใช้ต้องการในอุปกรณ์ต่างๆ โดยใช้ storage.sync API

options.js:

// Saves options to browser.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  browser.storage.sync.set(
    { favoriteColor: color, likesColor: likesColor },
    () => {
      // Update status to let user know options were saved.
      const status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(() => {
        status.textContent = '';
      }, 750);
    }
  );
};

// Restores select box and checkbox state using the preferences
// stored in browser.storage.
const restoreOptions = () => {
  browser.storage.sync.get(
    { favoriteColor: 'red', likesColor: true },
    (items) => {
      document.getElementById('color').value = items.favoriteColor;
      document.getElementById('like').checked = items.likesColor;
    }
  );
};

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);

สุดท้าย ให้เพิ่มสิทธิ์ "storage" ลงในไฟล์ manifest ของส่วนขยาย

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ]
  ...
}

ประกาศลักษณะการทำงานของหน้าตัวเลือก

หน้าตัวเลือกส่วนขยายมี 2 ประเภท ได้แก่ เต็มหน้าและฝัง ประเภท ของหน้าตัวเลือกจะกำหนดโดยวิธีประกาศในไฟล์ Manifest

ตัวเลือกแบบเต็มหน้า

หน้าตัวเลือกทั้งหน้าจะแสดงในแท็บใหม่ ลงทะเบียนไฟล์ HTML ของตัวเลือกในไฟล์ Manifest ในช่อง "options_page"

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
ตัวเลือกแบบเต็มหน้า
ตัวเลือกแบบเต็มหน้าในแท็บใหม่

ตัวเลือกที่ฝัง

หน้าตัวเลือกที่ฝังช่วยให้ผู้ใช้ปรับตัวเลือกส่วนขยายได้โดยไม่ต้องออกจากหน้าการจัดการส่วนขยายภายในกล่องที่ฝัง หากต้องการประกาศตัวเลือกที่ฝัง ให้ลงทะเบียนไฟล์ HTML ในฟิลด์ "options_ui" ในไฟล์ Manifest ของส่วนขยาย โดยตั้งค่าคีย์ "open_in_tab" เป็น false

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
ตัวเลือกที่ฝัง
ตัวเลือกที่ฝัง
page (สตริง)
ระบุเส้นทางไปยังหน้าตัวเลือกที่สัมพันธ์กับรูทของส่วนขยาย
open_in_tab (บูลีน)
ระบุว่าจะเปิดหน้าตัวเลือกของส่วนขยายในแท็บใหม่หรือไม่ หากตั้งค่าเป็น false ระบบจะฝังหน้าตัวเลือกของส่วนขยายไว้ใน chrome://extensions แทนที่จะเปิดในแท็บใหม่

พิจารณาความแตกต่าง

หน้าตัวเลือกที่ฝังไว้ภายใน chrome://extensions จะมีลักษณะการทำงานที่แตกต่างจากหน้าตัวเลือกในแท็บเล็กน้อย

ลิงก์ไปยังหน้าตัวเลือก

ส่วนขยายสามารถลิงก์ไปยังหน้าตัวเลือกได้โดยตรงโดยการเรียกใช้ browser.runtime.openOptionsPage() เช่น คุณสามารถเพิ่มลงในป๊อปอัปได้ดังนี้

popup.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

Tabs API

เนื่องจากไม่ได้โฮสต์โค้ดตัวเลือกที่ฝังไว้ในแท็บ จึงไม่สามารถใช้ Tabs API ได้ ให้ใช้ runtime.connect() และ runtime.sendMessage() แทน หากหน้าตัวเลือกจำเป็นต้องจัดการแท็บที่ประกอบอยู่

API การรับส่งข้อความ

หากหน้าตัวเลือกของส่วนขยายส่งข้อความโดยใช้ runtime.connect() หรือ runtime.sendMessage() ระบบจะไม่ตั้งค่าแท็บของผู้ส่ง และURL ของผู้ส่งจะเป็น URL ของหน้าตัวเลือก

การกำหนดขนาด

ตัวเลือกที่ฝังควรกำหนดขนาดของตัวเองโดยอัตโนมัติตามเนื้อหาของหน้า อย่างไรก็ตาม กรอบที่ฝังอาจมีขนาดไม่เหมาะสมกับเนื้อหาบางประเภท ปัญหานี้มักเกิดขึ้นกับหน้าตัวเลือกที่ปรับรูปร่างเนื้อหาตามขนาดหน้าต่าง

หากปัญหานี้เกิดขึ้น ให้ระบุขนาดขั้นต่ำที่แก้ไขแล้วสำหรับหน้าตัวเลือกเพื่อให้แน่ใจว่าหน้าเว็บที่ฝังจะพบขนาดที่เหมาะสม