一、描述

扩展程序允许用户通过提供的 options 页面来自定义扩展程序的行为。用户可以通过右键单击工具栏中的扩展程序图标,然后选择选项或导航至 chrome://extensions 的扩展程序管理页面查看扩展程序的选项,找到管理控制页面。

6.jpg

二、开发用户选项页面

比如下一个很简单的用户选项页面:

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

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

基本的逻辑处理:

// 通过 chrome.storage 保存
function saveOptions() {
    const color = document.getElementById('color').value;
    const likesColor = document.getElementById('like').value;
    chrome.storage.sync.set({
        favoriteColor: color,
        likesColor: likesColor,
    }, () => {
        // 更新状态文本
        const status = document.getElementById('status');
        status.textContent = 'options saved';
        // 隐藏状态文本
        setTimeout(() => {
            status.textContent = '';
        }, 500);
    })
}

// 重置所有的表单状态
function restoreOptions() {
    // 默认是 color = 'red' 并且 likesColor = 'true'
    chrome.storage.sync.get({
        favoriteColor: 'red',
        likesColor: true
    }, () => {
        document.getElementById('color').value = items.favoriteColor;
        document.getElementById('like').checked = items.likesColor;
    });
    document.addEventListener('DOMContentLoaded', restore_options);
    document.getElementById('save').addEventListener('click', save_options);
}

三、声明用户选项

有两种可用类型的扩展选项页面,整页嵌入式。选项的类型取决于它在清单中的声明方式。

1、整页面用户选项

扩展程序的选项页面将显示在新选项卡中。选项 HTML 文件在 options_page字段下配置:

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

查看用户选项:

1.jpg

2、嵌入式的用户选项

嵌入式选项允许用户调整扩展选项,而无需离开嵌入式框内的扩展管理页面。要声明嵌入选项,扩展程序 manifest 中的 options_ui 字段下注册 HTML 文件,并将 open_in_tab 键设置为 false

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

这个时候如果点击了用户控制选项,会以 modal 的形式弹出:

2.jpg

options_ui 的两个字段的意思是:

  • page:选项页面的代码地址
  • open_in_tab: 如果设置成 true,会在新的 tab 中打开,而不会在当前管理页面打开。

四、考虑不同

嵌入在 chrome://extensions 中的选项页面有一些与不在自己的选项卡中托管的选项页有一些行为差异。

1、链接到选项页面

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

比如 html 代码:

<button id="go-to-options">Go to options</button>

js 代码

document.querySelector('#go-to-options').addEventListener(function() {
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});

2、tabs API 的影响

如果不在自己的选项卡中托管,对于 chromes.tabs 的使用有点影响:

  • tabs.query 永远不会在扩展程序的选项页面URL中找到选项卡
  • 打开选项页面时,tabs.onCreated 不会触发
  • 选项页面加载状态更改时,不会触发 tabs.onUpdated
  • tabs.connecttabs.sendMessage 不能用于与选项页面通信

如果选项页面确实需要操作包含选项卡,则使用 runtime.connectruntime.sendMessage 可以解决这些限制。

3、Message API

如果扩展的选项页面使用 runtime.connectruntime.sendMessage 发送消息,则不会设置发件人的选项卡,并且发件人的 URL 将是选项页面 URL。

4、Sizing

嵌入选项页面应根据页面内容自动确定自己的大小,但是,对于某些类型的内容,嵌入式选项页面可能找不到合适的大小。

对于根据窗口大小调整其内容形状的选项页面,此问题最常见。

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

五、代码