我也发一个 Chrome 扩展，功能主治： Cookies 切换， UA 切换，简单的网址监听

介绍一下这个Chrome扩展的代码

类的关系

这个mind map Github链接，带黄色小标签的节点有文字注释

mmd文件可以用Idea的插件 浏览

类的作用

自定义类 Setting 包装了Chrome原生API chrome.storage.local 的一些功能，是用来存储数据的

类的data成员是JSON对象，以域名为键，值为{cookies, ua, requests}，用Chrome API Chrome.storage.local.get(null) 读取整个扩展的存储数据

类的init方法，监听了 chrome.storage.onChanged ，用于同步Chrome正常模式和Chrome隐身模式的自定义数据

自定义类 ExtensionEvent 是自定义事件

使用Chrome原生api 监听事件：

1. 监听Tab打开网页：chrome.webNavigation.onBeforeNavigate
2. 监听Tab的网络请求：chrome.webRequest.onCompleted
3. 监听Tab关闭：chrome.tabs.onRemoved
4. 监听Tab的切换：chrome.tabs.onActivated
5. 监听Tab的状态变化：chrome.tabs.onUpdated
6. 监听Chrome窗口切换：chrome.windows.onFocusChanged

组装成四个自定义事件：

• tab_start（1的事件参数parentFrameId为-1时触发）
• tab_load （1的事件参数parentFrameId不等于-1时触发，2）
• tab_update（4，5，6）
• tab_close（3）

自定义类 Tabs 为Chrome的右键菜单工作

自定义类 Tabs 为整个扩展的核心类，大致的工作流程：

• 监听自定义事件 tab_start 用于一个Tab开始打开网页(parentFrameId为-1)，提取打开的网页的域名，写入到Tabs类的成员data（JSON对象），以Chrome Tab id 为键，值为{domain, text, urls}，domain是主域，text是Chrome扩展小图标的badge文本（那个下标小数字），urls是监听到的网址数组

• 监听自定义事件 tab_load 用于检查所有请求是否符合简单的网址监听的设置，符合就添加到Tabs.data[tab id].urls里，并且更新Chrome browser action的图标bagde文本，就是那个下标数字

• 监听原生API chrome.webRequest.onBeforeSendHeaders，以Tab id和domain判断是否需要更改UA

• 监听自定义事件 tab_update 用于更新右键菜单，由于Chrome没有显示Chrome菜单之类的事件，只能在后台主动刷新菜单内容

• 自定义事件 tab_close， 删除 Tabs.data[tab id]

一些utils源码就不介绍了，源码有一些注释帮助理解

前往 Edge扩展商店页面 安装