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

本文已参与「新人创作礼」活动，一起敞开创作之路。

一、扩展程序的简易结构

当时版别 "manifest_version": 3，扩展程序的核心文件 manifest.json 中装备可生成以下简易结构，详细代码可参考代码仓 crxTemplate: 谷歌浏览器扩展程序的简易结构和通讯机制 (gitee.com))：

popup

"action": {
      "default_popup": "page/popup.html"
   }

装备 “action” 中的 “default_popup”，在扩展程序中增加后点击会呈现 “page/popup.html” 页面。以下是稀土的浏览器插件：

content

"content_scripts": [
      {
         "js": ["scripts/content.js"],
         "matches": ["<all_urls>"],
         "run_at": "document_end"
      }
   ]

装备 “content_scripts” 后会在 “matches” 匹配的站点上 “run_at” 机遇履行 “js” 脚本。能够获取当时页面的一些操作。

panel

"devtools_page": "page/devtools-background.html",

装备 “devtools_page” 后会加载插件时履行 “page/devtools-background.html” 页面，但是它是不可见的，但是在需求新增 “panel” 时，需求在其履行时运用以下脚本进行创立，扩展程序修改从头加载后刷新页面也不会履行，意味着调试时需求翻开新页面才有用。

chrome.devtools.panels.create(
    'ChromeDevToolsTemplate',
    null,
    '../page/panel.html'
)

以下是 Vue DevTools 的浏览器插件对应的 Vue 的 panel：

二、通讯机制

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

popup.js:

// 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:

// 接纳音讯 在当时操控台输出
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:

// 该打印是在查看 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 的脚本，所处理的页面不一样，对应的功用也是不一样的。