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

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

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

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

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<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>

บันทึกตัวเลือกที่ผู้ใช้ต้องการในอุปกรณ์ต่างๆ โดยใช้ storage.sync API

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

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

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

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

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

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

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

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

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

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

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

  • page (สตริง)

    เส้นทางไปยังหน้าตัวเลือกซึ่งสัมพันธ์กับรูทของส่วนขยาย

  • open_in_tab (boolean)

    ระบุเป็น false เพื่อประกาศหน้าตัวเลือกที่ฝังไว้ หากตั้งค่าเป็น true หน้าตัวเลือกของส่วนขยายจะเปิดในแท็บใหม่แทนที่จะฝังอยู่ใน chrome://extensions

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

หน้าตัวเลือกที่ฝังอยู่ใน chrome://extensions มีความแตกต่างด้านลักษณะการทำงานเล็กน้อยซึ่งเกี่ยวข้องกับการไม่ได้โฮสต์ภายในแท็บของตัวเอง

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

ส่วนขยายสามารถลิงก์ไปยังหน้าตัวเลือกได้โดยตรงด้วยการเรียก chrome.runtime.openOptionsPage()

<button id="go-to-options">Go to options</button>

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

API แท็บ

โค้ดของหน้าตัวเลือกแบบฝังของส่วนขยายไม่ได้โฮสต์ภายในแท็บ ซึ่งจะส่งผลต่อวิธีใช้ Tabs API ดังนี้

  • tabs.query จะไม่พบแท็บภายใน URL ของหน้าตัวเลือกของส่วนขยาย
  • tabs.onCreated จะไม่เริ่มทำงานเมื่อหน้าตัวเลือกเปิดขึ้น
  • tabs.onUpdated จะไม่เริ่มทำงานเมื่อสถานะการโหลดหน้าตัวเลือกมีการเปลี่ยนแปลง
  • ไม่สามารถใช้ tabs.connect หรือ tabs.sendMessage เพื่อสื่อสารกับหน้าตัวเลือก

การใช้ runtime.connect และ runtime.sendMessage เป็นการหลีกเลี่ยงข้อจำกัดเหล่านี้ หากหน้าตัวเลือกจำเป็นต้องดำเนินการกับแท็บที่มีอยู่

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

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

ขนาด

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

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