需求背景

项目中有个Chrome插件原来的需求是对指定url的页面在打开时自动执行一些功能。

在运行一段时间后，想要在一些情况下不执行这个插件的默认任务。

这个时候就需要停用插件，如果从管理插件的页面停用的话，操作链路比较长。需要右键点击插件->管理扩展程序->禁用。

需求描述

于是需求来了。希望能点击插件icon，在弹出的popup中有个地方可以设置当前运行状态。如下图：

通过简单的点击，可以实现启用或禁用状态的切换。实现这个功能可以提升平时对该插件管理的使用效率。

技术核心点

1、action对应的popup

2、插件对状态的管理，chrome.storage

3、popup中的状态展示和插件运行时的状态同步问题。

具体实现相关代码

在popup.html中增加checkbox，可以自定义样式，在点击时根据不同状态设置chrome.storage的状态。

在插件开始执行的content.js中，先获取chrome.storage的状态，根据状态确定是否执行默认的任务。

chrome.storage.sync.get(["autoScoreStatus"], (item) => {
    console.log(item);
    // 这里控制初始化，如果没取到值，说明是第一次安装，默认为true
    if (!item.hasOwnProperty("autoScoreStatus")) {
        chrome.storage.sync.set(
            { autoScoreStatus: true },
            () => {
                initMethod();
                console.log("启动了");
            }
        );
    }
    if (item.autoScoreStatus === true) {
        // 启动了
        console.log("启动了");
        initMethod();
        return;
    }
    console.log("全局状态关闭了");
});

总结

通过在`chrome.storage`中设置变量，可以将`popup`和`content.js`两者的状态同步。确保插件能够按照设置的正确执行。

Tips

注意，chrome.storage的生命周期

chrome的插件机制提供了存储相关的apichrome.storage,可以实现在插件中数据共享。一般有三种模式:

chrome.storage.local
- 数据存储在本地，在删除扩展时会被清除。配额限制约为 5 MB，但可以通过请求权限来增加"unlimitedStorage"。
chrome.storage.sync
- 如果启用同步，数据将同步到用户登录的任何 Chrome 浏览器。如果禁用，它的行为类似于storage.local.
chrome.storage.session
- 在浏览器会话期间将数据保存在内存中。默认情况下，它不会暴露给内容脚本，但可以通过设置更改此行为chrome.storage.session.setAccessLevel()。配额限制约为 10 MB。

Chrome插件开发在popup中设置插件的变量