本文实践验证环境：版本 138.0.7204.101（正式版本） (arm64)
什么是option页面？
option页面 是Chrome Extension的核心构成部分，它会跟随插件安装在用户的浏览器上。大部分插件中会将option页面作为用户设置页，也有部分插件会直接将其作为用户本地的独立功能页，比如作为批量采集数据的入口；
与插件中其他构成部分不同的是：
- 一个插件最多可以设置一个option页面;
- popup页面可以设置多个；
- 不仅可以直接访问插件的chrome相关API，也是一个独立完整的页面，即拥有完整的window、dom操作能力;
- service worker没有dom操作能力；
- content只有部分chrome API的操作能力（比如storage）；
option有哪几种呈现方式？
因为option不同的呈现方式不仅会影响到交互体感，而且在编码场景下，插件配置方式、打开方式都不同，且在通信方式上也会略有差异，所以在讲打开option页面方式之前，我们先来看看option的呈现方式。
option有两种呈现方式：选项卡页面 和 弹框方式，这两种方式的相同点是：一个浏览器窗口最多只能打开一个option页面（请结合交互视频理解，此时，为了多个被打开的option页面数据的一致性，开发时请做好数据更新的监听与同步）；
选项卡页面方式 就是直接打开一个浏览器选项卡，选项卡的地址为 chrome-extension:///option.html（其中，option.html 这个文件地址是由配置决定的）；
弹框式 的交互方式为：打开时，会先跳转到插件详情页，然后再弹出弹框（请看交互视频）。相对于页面式，需要注意的是：弹框式option的弹框大小是由内容大小决定的，所以开发者最好在编码时为内容设置固定尺寸以确保不会发生"尺寸不对而引起的内容错乱"问题；
如何打开option页面？
说完呈现方式，接下来切入正题说说如何打开option页面，打开option页面有两种方式：
1. 用户通过浏览器右上角插件logo-选项打开。
主要决定这种呈现方式的是manifest.json的配置信息：
页面方式配置（说明：第二种方式官方文档中并未标明，由笔者自行实践得出）：
js
// manifest.json
// 这种方式是官方文档中推荐的
{
...
"options_page": "option.html", // option.html这个文件地址会影响TAB页中的地址
...
}
// 这种方式官方文档中并未标出，由笔者自行实践得出
{
...
"options_ui": {
"page": "option.html",
"open_in_tab": true
},
...
}
弹框方式配置：
js
// manifest.json
{
...
"options_ui": {
"page": "option.html",
"open_in_tab": false
},
...
}2. 开发者自行编码得到一个点击入口并自行实现点击事件去触发option页面的呈现。
这种方式官方提供了一个兼容性的编写函数：
js
if (chrome.runtime.openOptionsPage) {
// 如果配置的是弹框方式的，则用这种方式打开
chrome.runtime.openOptionsPage();
} else {
// 否则直接打开tab页
window.open(chrome.runtime.getURL('option.html'));
}与option消息通信需要注意什么？
针对插件的各个部分之间的通信关键，其实，只要记住以下这点，你就可以运用自如了：
- Tab页 向 插件后台类（service worker / option等）发送消息时，可以使用chrome.runtime.connect建立长链接通信通道，也可以使用chrome.runtime.sendMessage直接进行短连接通信；
- 插件后台类 （service worker / option等）向 Tab页 发送消息时，因为插件后台类往往全局只有一个执行上下文，并且插件本身限制" 插件后台类只能与一个Tab建立通信通道 "，所以就需要用到chrome.tabs相关函数：chrome.tabs.connect建立长链接通信通道、chrome.tabs.sendMessage建立短连接通信通道；
- 插件后台类相互之间发送消息时，也可以使用chrome.runtime函数进行长短连接的通信通道；
- 结合第2点和第3点，option页面是一个特殊场景。当它的展现方式是页面形式时，它对Service Worker来说就是一个Tab页，所以也可以使用chrome.tabs相关函数，但是弹框形式情况下，它的执行上下文不再与Tab一致，所以会导致Service Worker无法使用chrome.tabs与其相连；
- 另外，应对option页面发出的信息，接收方接收的信息中不包含sender.tab信息；
- 同时，经过实践，option向Service Worker发送消息时，会携带sender.url信息 ，url一般就是这个格式：chrome-extension:///option.html，但option向Tab发送信息时，不会携带sender.url信息；
以上文字内容，整理成表图如下：
