晓晓的个人博客Logo
晓晓的个人博客
关于Chrome Extension option的一些小事
AI提炼icon
提炼
本文围绕 Chrome Extension 的 option 部分展开,在版本 138.0.7204.101(正式版本)(arm64) 环境下,阐述其基础知识、交互方式、编码方式及通信能力。option 页面作为核心部分,用途多样,且一个插件仅能设一个。其呈现方式有选项卡页面和弹框方式,各有特点与注意事项。打开方式包括用户通过插件 logo - 选项打开(由 manifest.json 配置决定呈现方式)和开发者编码实现。通信方面,不同组件间通信方式有别,option 页面因呈现方式不同,与其他组件通信存在特殊情况,文中还以表格形式总结相关内容。
本文于 2025-08-10 16:08 首次发布,最后修改于 2025-08-24 15:53

本文实践验证环境:版本 138.0.7204.101(正式版本) (arm64)

什么是option页面?

option页面 是Chrome Extension的核心构成部分,它会跟随插件安装在用户的浏览器上。大部分插件中会将option页面作为用户设置页,也有部分插件会直接将其作为用户本地的独立功能页,比如作为批量采集数据的入口;

与插件中其他构成部分不同的是:

  1. 一个插件最多可以设置一个option页面;

    1. popup页面可以设置多个。这里的意思是:在插件包中可以存在多个popup页面(比如,popup_a.html、popup_b.html等),然后可以根据不同的时机弹出不同的popup页面,但每次只能选择一个popup页面进行执行、展示;

  2. 不仅可以直接访问插件的chrome相关API,也是一个独立完整的页面,即拥有完整的window、dom操作能力;

    1. Service Worker没有dom操作能力;

    2. Content层只有部分chrome API的操作能力(比如storage);

 option有哪几种呈现方式?

因为option不同的呈现方式不仅会影响到交互体感,而且在编码场景下,插件配置方式、打开方式都不同,且在通信方式上也会略有差异,所以在讲打开option页面的方式之前,我们先来看看option的呈现方式。

option有两种呈现方式:选项卡页面 和 弹框方式,这两种方式的相同点是:一个浏览器窗口最多只能打开一个option页面(请结合交互视频理解,此时,为了多个被打开的option页面数据的一致性,开发时请做好数据更新的监听与同步)

第一种,选项卡页面方式 就是直接打开一个浏览器选项卡,选项卡的地址为 chrome-extension://<extension-id>/option.html(其中,option.html 这个文件地址是由manifest.json文件中的配置决定的);

第二种,弹框式 的交互方式为:打开时,会先跳转到插件详情页,然后再弹出弹框(请看交互视频)。相对于页面式,需要注意的是:弹框式option的弹框大小是由其内容大小决定的,所以开发者最好在编码时为内容设置固定尺寸以确保不会发生画“因尺寸不对而引起的内容错乱”问题;

如何打开option页面?

说完呈现方式,接下来切入正题说说如何打开option页面,打开option页面也有两种方式:

1. 第一种:用户通过浏览器右上角插件logo-选项打开。

打开option页面方式-从选项打开
打开option页面方式-从选项打开

决定这种呈现方式的主要是manifest.json的配置信息:

页面方式配置如下(说明:第二种方式官方文档中并未标明,由笔者自行实践得出)

弹框方式配置如下:

2. 第二种:开发者自行编码得到一个点击入口并自行实现点击事件去触发option页面的呈现。

这种方式官方提供了一个兼容性的“呈现option页面”函数:

与option消息通信需要注意什么?

针对插件的各个部分之间的通信关键,其实,只要记住以下这几点,你就可以运用自如了:

  1. Tab页 向 插件后台类(service worker / option等)发送消息时,可以使用 chrome.runtime.connect 建立长链接通信通道,也可以使用 chrome.runtime.sendMessage 直接进行短连接通信;

  2. 插件后台类(service worker / option等)向 Tab页 发送消息时,因为插件后台类往往全局只有一个执行上下文,并且插件本身限制 “插件后台类只能与一个Tab页建立通信通道 ”,所以就需要用到 chrome.tabs 相关函数:chrome.tabs.connect 建立长链接通信通道、chrome.tabs.sendMessage 建立短连接通信通道(他们在建立通信通道时,都需要指定 Tab ID,也就是你要指定与哪个Tab页建立通信通道);

  3. 插件后台类相互之间发送消息时,可以使用 chrome.runtime 函数进行长短连接通信;

  4. 结合第2点和第3点,option页面是一个特殊场景。当它的展现方式是页面形式时,它对 Service Worker 来说就是一个Tab页,所以也可以使用 chrome.tabs 相关函数,但是在弹框形式下,它的执行上下文不再与Tab一致,所以会导致 Service Worker 无法使用 chrome.tabs 与其相连;

  5. 另外,应对 option页面 发出的信息,接收方接收的信息中不包含 sender.tab 信息

  6. 同时,经过实践,option 向 Service Worker 发送消息时,会携带 sender.url 信息,url一般格式就是:chrome-extension://<extension-id>/option.html,但option向Tab页发送信息时,不会携带 sender.url 信息;

  7. 当Tab页向option页面发送消息时,option页面必须是打开状态,否则option页面无法接收、处理消息。

以上文字内容,整理成表图如下:

2个赞
喜欢就点个赞吧