谷歌浏览器扩展程序的简易结构和通信机制

语言: CN / TW / HK

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

一、扩展程序的简易结构

当前版本 "manifest_version": 3,扩展程序的核心文件 manifest.json 中配置可生成以下简易结构,详细代码可参考代码仓 crxTemplate: 谷歌浏览器扩展程序的简易结构和通信机制 (gitee.com)):

popup

json "action": { "default_popup": "page/popup.html" } 配置 "action" 中的 "default_popup",在扩展程序中添加后点击会出现 "page/popup.html" 页面。以下是稀土掘金的浏览器插件: image.png

content

json "content_scripts": [ { "js": ["scripts/content.js"], "matches": ["<all_urls>"], "run_at": "document_end" } ] 配置 "content_scripts" 后会在 "matches" 匹配的站点上 "run_at" 时机执行 "js" 脚本。可以获取当前页面的一些操作。

image.png

panel

json "devtools_page": "page/devtools-background.html", 配置 "devtools_page" 后会加载插件时执行 "page/devtools-background.html" 页面,但是它是不可见的,但是在需要新增 "panel" 时,需要在其执行时使用以下脚本进行创建,扩展程序修改重新加载后刷新页面也不会执行,意味着调试时需要打开新页面才有效。 javascript chrome.devtools.panels.create( 'ChromeDevToolsTemplate', null, '../page/panel.html' ) 以下是 Vue DevTools 的浏览器插件对应的 Vue 的 panel: image.png

二、通信机制

popup.js、content.js 与 panel.js 三者间的通信机制。

popup.js: ```javascript // button 按钮点击时发送消息 查看控制台时需要对 popup 页面进行检查,在对应的控制台输出 document.querySelector('button').onclick = function () { chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ chrome.tabs.sendMessage(tabs[0].id, {'popup': true}, function(res){ console.log(res); }) }) } // 接收消息 查看控制台时需要对 popup 页面进行检查,在对应的控制台输出 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){ console.log(message, sender); sendResponse('popup') })

```

content.js: javascript // 接收消息 在当前控制台输出 chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){ console.log(message, sender); // 发送消息 在当前控制台输出 chrome.runtime.sendMessage({greet: 'hello, I am content.'}, function(response){ console.log(response); }) sendResponse('content'); })

panel.js: javascript // 该打印是在检查 panel 的控制台中,类似于嵌套的控制台 document.querySelector('button').onclick = function () { console.log('hello panels!'); chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ chrome.tabs.sendMessage(tabs[0].id, 'panels', function(res){ console.log(res); }) }) } // 接收消息 打印在检查 panel 的控制台中,类似于嵌套的控制台 chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){ console.log(message, sender); sendResponse('panels'); }) 以上,从调试面板上可以看出,这个三块是属于不同模块的东西,content.js 是当前页面的脚本,popup 是 popup.html 页面的脚本,panel 是对应 panel.html 的脚本,所处理的页面不一样,对应的功能也是不一样的。