Cung cấp các lựa chọn cho người dù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 lựa chọn để bật 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 lựa chọn

Người dùng có thể truy cập vào trang lựa chọn bằng đường liên kết trực tiếp hoặc bằng cách nhấp chuột phải vào biểu tượng tiện ích trên thanh công cụ rồi chọn "lựa chọn". Ngoài ra, người dùng có thể chuyển đến trang lựa 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 các lựa chọn.

Đường liên kết đến trang Tuỳ chọn trong giao diện người dùng
Liên kết đến trang Tuỳ chọn.
Trang Context Menu Options (Các lựa chọn trong trình đơn theo bối cảnh)
Nhấp chuột phải vào biểu tượng của tiện ích.

Viết trang lựa chọn

Sau đây là ví dụ về một 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 ví dụ về tập lệnh lựa chọn. Lưu tệp đó vào cùng 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ị bằng cách sử dụng API storage.sync.

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);

Cuối cùng, hãy thêm quyền "storage" vào tệp manifest của tiện ích:

manifest.json:

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

Khai báo hành vi của trang lựa chọn

Có hai loại trang tuỳ chọn tiện ích, đó là trang đầy đủ và được nhúng. Loại trang tuỳ chọn được xác định bằng cách trang này được khai báo trong tệp kê khai.

Các lựa chọn về toàn bộ trang

Trang tuỳ chọn toàn trang sẽ xuất hiện trong một thẻ mới. Đăng ký tệp HTML của trang tuỳ chọn trong tệp kê khai ở trường "options_page".

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Các lựa chọn về toàn bộ trang
Các lựa chọn cho toàn trang trong một thẻ mới.

Tuỳ chọn nhúng

Trang lựa chọn được nhúng cho phép người dùng điều chỉnh các lựa chọn của tiện ích mà không cần rời khỏi trang quản lý tiện ích trong một hộp được nhúng. Để khai báo các lựa chọn nhúng, hãy đăng ký tệp HTML trong trường "options_ui" trong 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
  },
  ...
}
Tuỳ chọn nhúng
Các lựa chọn nhúng.
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 tiện ích.
open_in_tab (boolean)
Cho biết trang tuỳ chọn của tiện ích sẽ được mở trong một thẻ mới hay không. Nếu bạn đặt thành false, trang tuỳ chọn của tiện ích sẽ được nhúng vào chrome://extensions thay vì mở trong một thẻ mới.

Cân nhắc những điểm khác biệt

Các trang tuỳ chọn được nhúng bên trong chrome://extensions có những điểm 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 lựa 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 browser.runtime.openOptionsPage(). Ví dụ: bạn có thể thêm mã này vào một 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 (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

Tabs API

Vì mã lựa chọn nhúng không được lưu trữ trong thẻ, nên bạn không thể sử dụng Tabs API. Thay vào đó, hãy 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 thông báo 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 lựa chọn được nhúng sẽ tự động xác định kích thước của chính chúng dựa trên nội dung trang. Tuy nhiên, hộp được nhúng có thể không tìm được 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à một vấn đề, hãy cung cấp kích thước tối thiểu cố định cho trang tuỳ chọn để đảm bảo rằng trang được nhúng sẽ có kích thước phù hợp.