Trang này được dịch bởi Cloud Translation API.

Cung cấp các lựa chọn cho người dùng

Cũng giống như các tiện ích cho phép người dùng tuỳ chỉnh trình duyệt Chrome, trang tuỳ chọn bật 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 nào phù hợp với nhu cầu của họ.

Tìm 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ụ rồi chọn các lựa chọn. Ngoài ra, người dùng có thể chuyển đến trang tuỳ chọn bằng cách trước tiên, hãy 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 tuỳ 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 Tuỳ chọn của 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 các lựa 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à tập lệnh tùy chọn mẫu. 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 tuỳ 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 có lựa chọn cho phần mở rộng, đó là toàn trang và được nhúng. Loại được xác định theo cách khai báo trong tệp kê khai.

Tuỳ chọn toàn 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 ở trường "options_page".

manifest.json:

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

Tuỳ 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 của tiện ích mà không cần rời khỏi bên trong hộp được nhúng. Để khai báo các tuỳ chọn được nhúng, hãy đăng ký HTML vào 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
  },
  ...
}

page (chuỗi): Chỉ định đường dẫn đến trang tuỳ chọn, tương ứng với gốc của tiện ích.
open_in_tab (boolean): Cho biết trang tuỳ chọn của tiện ích có được mở trong thẻ mới hay không. Nếu bạn đặt thành false, thì trang tuỳ chọn của tiện ích sẽ được nhúng trong chrome://extensions thay vì mở trong thẻ mới.

Cân nhắc sự khác biệt

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

API Thẻ

Bạn không thể sử dụng API Thẻ vì mã tuỳ chọn đã nhúng không được lưu trữ trong một thẻ. 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 hàm runtime.connect() hoặc runtime.sendMessage(), thẻ của người gửi sẽ không được thiết lập và URL của người gửi sẽ là URL 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 của riêng chúng dựa trên nội dung trang. Tuy nhiên, hộp được 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. Đây là vấn đề 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 kích thước tối thiểu cố định cho trang tuỳ chọn để đảm bảo rằng được nhúng sẽ tìm kích thước phù hợp.