谷歌插件开发基础架构以及页面间通信

谷歌插件开发基础架构以及页面间通信

文档地址

官方文档
非官方中文版

一个扩展程序应该包括哪几个基本的部分

1. 可能包含一个供用户使用的用户界面（popup.html）
   

2. 一个插件运行的后台页面 或事件页面 （background.js）

   这个页面就是插件主要功能实现的地方，必定需要一个JS脚本，负责插件的主要逻辑

3. 一个可能的内容脚本（contentscript.js）

   可以简单的理解为一个JS文件，用来操作浏览器打开的网页

谷歌官方图解

如何声明这几个页面，脚本

{
  	
    "name": "",
    "version": "",
    "description": "",
    // 插件需要的权限  
    "permissions": [
        "browsingData",
        "tabs",
        "storage",
        "webRequest",
        "webRequestBlocking",
        "https://*"
    ],
    // 浏览器按钮，此处定义了一个用户界面  
    "browser_action": {
        "default_icon": "resource/icon2.png",
        "default_popup": "html/popup.html"
    },
    // 内容脚本
    "content_scripts": [
        {
          "matches": ["https://*"],
          "css": [],
          "js": ["js/jquery-3.4.1.min.js", "js/content.js"]
        }
      ],
    // 后台页面
    "background": {
        "scripts": [
            "js/md5.js",
            "js/background.js"
        ]
    },
    "manifest_version": 2
}

关键点：不同的页面之间如何通信

插件的主要逻辑会集中在后台页面。但是大多数场景下都几个页面之间相互配合才能完成相应的功能

为什么需要通信？

以ABP插件为例

1. ABP插件是支持自定义拦截规则的，那么这个我们由用户界面输入的规则需要传递给后台页面，以实现对内容的拦截

2. ABP插件拦截了数个广告，需要使用内容脚本，将页面上的广告元素屏蔽掉。以及如果告诉用户此页面拦截了几个广告，这又需要后台页面和用户界面进行通信

谷歌官方图解

1. popup.js和background.js之间的相互通信可以调用彼此声明的函数的方式进行

   // popup.js
   // 此处是popup.js调用background.js的方式，需要先通过chrome.extension.getBackgroundPage()拿到当前插件对应的后台对象
   var bg = chrome.extension.getBackgroundPage();
   var sqls = bg.getSQL();
   

   // background.js
   // 此处可以拿到运行在当前扩展下的所有'window'，可以根据window类型筛选出popup.js
   var views = chrome.extension.getViews();
   

2. contentscript.js和background.js/popup.js的通信需要通过消息事件进行

   // background.js
   // 根据条件，获取浏览器当前打开的相关标签页
   chrome.tabs.query({ url: 'regex匹配' },(tabs) => {
       for (var i = 0; i < tabs.length; i++) {
           // 判断出需要向哪个标签页发消息
           if (tabs[i].url == "具体值" && tabs[i].active) {
               // 根据tabId发送消息
               chrome.tabs.sendMessage(tabs[i].id, message);
           }
       }
   });
   

   // contentscript.js
   // 监听消息
   chrome.runtime.onMessage.addListener(
       function(request, sender, respoonse) {
           // 具体操作;
           // response()可进行回调操作
         });