Cũng giống như tiện ích cho phép người dùng tuỳ chỉnh trình duyệt Chrome, trang tuỳ chọn cho phép tuỳ chỉnh tiện ích. Sử dụng các tuỳ chọn để bật các tính năng và cho phép người dùng chọn chức năng phù hợp với nhu cầu của họ.
Xác định vị trí trang tuỳ chọn
Người dùng có thể truy cập vào trang tuỳ chọn bằng cách liên kết trực tiếp hoặc nhấp chuột phải vào biểu tượng tiện ích trên thanh công cụ, sau đó chọn các tuỳ chọn. Ngoài ra, trước tiên, người dùng có thể chuyển đến trang tuỳ chọn bằng cách mở chrome://extensions, tìm tiện ích mong muốn, nhấp vào Chi tiết rồi chọn đường liên kết đến tuỳ chọn.
Viết trang tuỳ chọn
Sau đây là ví dụ về trang tuỳ chọn:
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>
Dưới đây là một tập lệnh tuỳ chọn mẫu. Lưu tệp vào cùng một thư mục với options.html.
Thao tác này sẽ lưu các lựa chọn ưu tiên của người dùng trên các thiết bị sử dụng API storage.sync.
options.js:
// Saves options to chrome.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
chrome.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 chrome.storage.
const restoreOptions = () => {
chrome.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);
Cuối cùng, hãy thêm quyền "storage" vào tệp tệp kê khai của tiện ích:
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
Khai báo hành vi của trang tuỳ chọn
Có hai loại trang lựa chọn tiện ích là trang đầy đủ và được nhúng. Loại trang tuỳ chọn được xác định theo cách khai báo trang đó trong tệp kê khai.
Tuỳ chọn đầy đủ về trang
Trang tuỳ chọn toàn trang sẽ xuất hiện trong thẻ mới. Đăng ký tệp HTML tuỳ chọn trong tệp kê khai trong trường "options_page".
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Tùy chọn được nhúng
Trang tuỳ chọn được nhúng cho phép người dùng điều chỉnh các tuỳ chọn tiện ích mà không cần di chuyển khỏi trang quản lý tiện ích bên trong hộp được nhúng. Để khai báo các tuỳ chọn được nhúng, hãy đăng ký tệp HTML trong trường "options_ui" của tệp kê khai tiện ích, với khoá "open_in_tab" được đặt thành false.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(chuỗi)- Chỉ định đường dẫn đến trang tuỳ chọn, tương ứng với thư mục gốc của phần mở rộng.
open_in_tab(boolean)- Cho biết trang tuỳ chọn của tiện ích có được mở trong một thẻ mới hay không. Nếu bạn đặt chính sách này thành
false, thì trang tuỳ chọn của tiện ích sẽ được nhúng trongchrome://extensionsthay vì được mở trong một thẻ mới.
Cân nhắc sự khác biệt
Các trang tuỳ chọn được nhúng trong chrome://extensions có những khác biệt nhỏ về hành vi so với các trang tuỳ chọn trong thẻ.
Đường liên kết đến trang tuỳ chọn
Tiện ích có thể liên kết trực tiếp đến trang tuỳ chọn bằng cách gọi chrome.runtime.openOptionsPage(). Ví dụ: bạn có thể thêm đoạn mã sự kiện vào cửa sổ bật lên:
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 (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
API Tab
Vì mã tuỳ chọn đã nhúng không được lưu trữ trong thẻ nên bạn không thể sử dụng API Tab.
Thay vào đó, hãy sử dụng runtime.connect() và runtime.sendMessage(), nếu trang tuỳ chọn cần thao tác với thẻ chứa.
API nhắn tin
Nếu trang tuỳ chọn của một tiện ích gửi tin nhắn bằng runtime.connect() hoặc runtime.sendMessage(), thì thẻ của người gửi sẽ không được đặt và URL của người gửi sẽ là URL của trang tuỳ chọn.
Kích thước
Các tuỳ chọn được nhúng sẽ tự động xác định kích thước riêng dựa trên nội dung trang. Tuy nhiên, hộp nhúng có thể không tìm thấy kích thước phù hợp cho một số loại nội dung. Vấn đề này thường gặp nhất đối với các trang tuỳ chọn điều chỉnh hình dạng nội dung dựa trên kích thước cửa sổ.
Nếu đây là vấn đề, hãy cung cấp các phương diện tối thiểu cố định cho trang tuỳ chọn để đảm bảo rằng trang được nhúng sẽ tìm thấy kích thước phù hợp.