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

อนุญาตให้ผู้ใช้ปรับแต่งลักษณะการทำงานของส่วนขยายได้โดยระบุหน้าตัวเลือก ผู้ใช้สามารถดู ตัวเลือกของส่วนขยายได้โดยคลิกขวาที่ไอคอนส่วนขยายในแถบเครื่องมือ แล้วเลือกตัวเลือก หรือ โดยไปที่หน้าการจัดการส่วนขยายที่ 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 (บูลีน)

    ระบุเป็น 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'));
  }
});

Tabs API

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

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

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

Messaging APIs

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

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

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

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