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

Cho phép người dùng tuỳ chỉnh hành vi của một tiện ích bằng cách cung cấp một trang lựa chọn. Người dùng có thể xem các lựa chọn của 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ụ rồi chọn các lựa chọn hoặc bằng cách 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, sau đó chọn đường liên kết đến các lựa chọn.

Viết trang lựa chọn

Dưới đây là một ví dụ về trang tuỳ chọn.

<!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 các lựa chọn ưu tiên của người dùng trên nhiều thiết bị bằ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 lựa chọn

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

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

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

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

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

Các lựa chọn nhúng

Các lựa chọn được nhúng cho phép người dùng điều chỉnh các lựa chọn về 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 một lựa chọn được 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.

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

Các lựa chọn 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 một trang tuỳ chọn được nhúng. Nếu true, trang tuỳ chọn của tiện ích sẽ mở ra trong một thẻ mới thay vì được nhúng trong chrome://extensions.

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

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

Tabs API

Mã trang tuỳ chọn được nhúng của tiện ích không được lưu trữ trong 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ể 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 cho 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 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 riêng nó 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.