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