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

Cho phép người dùng tuỳ chỉnh hoạt động của một tiện ích bằng cách cung cấp một trang tuỳ chọn. Người dùng có thể xem các tuỳ chọn của một tiện ích 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ụ, sau đó chọn các tuỳ chọn hoặc chuyển đến trang quản lý tiện ích tại 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

Dưới đây là trang lựa chọn mẫu.

<!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>

Lưu tuỳ 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.

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

Khai báo hành vi của trang tuỳ chọn

Có 2 loại trang tuỳ chọn tiện ích: toàn trang và được nhúng. Loại tuỳ chọn được xác định theo cách khai báo trong tệp kê khai.

Tuỳ chọn đầy đủ về trang

Trang tuỳ chọn của tiện ích sẽ hiển thị trong thẻ mới. Tệp HTML tuỳ chọn được liệt kê đã đăng ký trong trường options_page.

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

Tuỳ chọn đầy đủ về trang

Tùy chọn được nhúng

Các 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.

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

Tùy chọn được nhúng

  • page (chuỗi)

    Đườ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)

    Chỉ định là false để khai báo trang tuỳ chọn được nhúng. Nếu là true, trang tuỳ chọn của tiện ích sẽ mở trong một thẻ mới thay vì được nhúng trong chrome://extensions.

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

Các trang tuỳ chọn được nhúng bên trong chrome://extensions có một số khác biệt nhỏ về hành vi liên quan đến việc không được lưu trữ bên trong các thẻ riê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() .

<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 Tab

Mã trang tuỳ chọn được nhúng của tiện ích không được lưu trữ trong một thẻ, ảnh hưởng đến cách sử dụng API Thẻ:

  • tabs.query sẽ không bao giờ tìm thấy thẻ trong URL trang tuỳ chọn của tiện ích.
  • tabs.onCreated sẽ không kích hoạt khi trang tuỳ chọn được mở.
  • tabs.onUpdated sẽ không kích hoạt khi trạng thái tải trang tuỳ chọn thay đổi.
  • Bạn không thể sử dụng tabs.connect hoặc tabs.sendMessage để giao tiếp với trang tuỳ chọn.

Việc sử dụng runtime.connect và runtime.sendMessage là một giải pháp để khắc phục những hạn chế này, 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 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 tuỳ chọn được nhúng sẽ tự động xác định kích thước của riêng tuỳ chọn đó 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.