给用户选项

允许用户通过提供选项页面来自定义扩展的行为。 用户可以通过右键单击工具栏中的扩展图标，然后选择选项，或访问 chrome://extensions 的扩展管理页面，找到所需的扩展，点击“详细信息”，然后选择选项链接来查看扩展的选项。

编写选项页面

下面是一个选项页面示例。

  1. <!DOCTYPE html>
  2. <html>
  3. <head><title>My Test Extension Options</title></head>
  4. <body>
  6. Favorite color:
  7. <select id="color">
  8.  <option value="red">red</option>
  9.  <option value="green">green</option>
  10.  <option value="blue">blue</option>
  11.  <option value="yellow">yellow</option>
  12. </select>
  14. <label>
  15.   <input type="checkbox" id="like">
  16.   I like colors.
  17. </label>
  19. <div id="status"></div>
  20. <button id="save">Save</button>
  22. <script src="options.js"></script>
  23. </body>
  24. </html>

使用 storage.sync API 在设备上保存用户的首选项。

  1. // Saves options to chrome.storage
  2. function save_options() {
  3.   var color = document.getElementById('color').value;
  4.   var likesColor = document.getElementById('like').checked;
  5.   chrome.storage.sync.set({
  6.     favoriteColor: color,
  7.     likesColor: likesColor
  8.   }, function() {
  9.     // Update status to let user know options were saved.
  10.     var status = document.getElementById('status');
  11.     status.textContent = 'Options saved.';
  12.     setTimeout(function() {
  13.       status.textContent = '';
  14.     }, 750);
  15.   });
  16. }
  18. // Restores select box and checkbox state using the preferences
  19. // stored in chrome.storage.
  20. function restore_options() {
  21.   // Use default value color = 'red' and likesColor = true.
  22.   chrome.storage.sync.get({
  23.     favoriteColor: 'red',
  24.     likesColor: true
  25.   }, function(items) {
  26.     document.getElementById('color').value = items.favoriteColor;
  27.     document.getElementById('like').checked = items.likesColor;
  28.   });
  29. }
  30. document.addEventListener('DOMContentLoaded', restore_options);
  31. document.getElementById('save').addEventListener('click',
  32.     save_options);

声明选项页面行为

扩展选项页面有两种可用的类型：整页和嵌入式。 选项的类型由 minifest 中的声明方式决定。

整页选项

扩展程序的选项页面将显示在新选项卡中。该 Html 文件在 options_page 字段下注册。

  1. {
  2.   "name": "My extension",
  3.   ...
  4.   "options_page": "options.html",
  5.   ...
  6. }

full_page_options

嵌入式选项

嵌入式选项使用户可以无需离开扩展管理页面就能调整扩展选项。 要声明嵌入式选项，请在扩展 manifest 的 options_ui 字段下注册 HTML文件，并将 open_in_tab 键设置为false。

  1. {
  2.   "name": "My extension",
  3.   ...
  4.   "options_ui": {
  5.     "page": "options.html",
  6.     "open_in_tab": false
  7.   },
  8.   ...
  9. }

embedded_options

  • page (string) 选项页面的路径，相对于扩展的根目录。

  • open_in_tab (boolean)

    指定为 false 以声明嵌入式选项页面。如果为true，则扩展的选项页面将在新标签页中打开，而不是嵌入 chrome://extensions 中。

思考差异

嵌入在 chrome://extensions 中的选项页与整页选项页存在一些细微的行为差异。

链接到选项页面

扩展程序可以通过调用chrome.runtime.openOptionsPage() 直接链接到选项页面。

  1. <button id="go-to-options">Go to options</button>
  1. document.querySelector('#go-to-options').addEventListener(function() {
  2.   if (chrome.runtime.openOptionsPage) {
  3.     chrome.runtime.openOptionsPage();
  4.   } else {
  5.     window.open(chrome.runtime.getURL('options.html'));
  6.   }
  7. });

Tabs API

扩展程序嵌入的选项页面代码未托管在选项卡中，从而影响了 Tabs API 的使用方式：

  • tabs.query 在扩展程序的选项页面 URL 中永远找不到 tab。
  • 打开选项页面时，tabs.onCreated 将不会触发。
  • 选项页加载状态更改时，tabs.onUpdated 将不会触发。
  • tabs.connect 或 tabs.sendMessage 不能用于与选项页面进行通信。

如果选项页面确实需要操纵选项卡，使用 runtime.connect 和 runtime.sendMessage 解决这些限制。

Messaging APIs

如果扩展程序的选项页面使用 runtime.connect 或 runtime.sendMessage 发送消息，则不用设置 sender tab，并且 sender url 将是选项页URL。

Sizing

嵌入式选项页应根据页面内容自动确定其自身大小。 但是，对于某些类型的内容，嵌入式容器可能找不到合适的尺寸。对于根据窗口大小调整其内容形状的选项页，此问题最常见。

如果这是一个问题，请为选项页面提供固定的最小尺寸，以确保嵌入式页面将找到合适的尺寸。

关注 微信公众号「程序化思维」 获取最新 Chrome 插件开发教程。

mp_wechat