谷歌插件

什么是谷歌插件？

谷歌插件，全名谷歌浏览器扩展程序。那什么是谷歌浏览器扩展程序，官方说明如下：

扩展程序允许您为 Chrome浏览器增加功能，而不需要深入研究本机代码。您可以使用您在网页开发中已经很熟悉的核心技术（HTML、CSS 与 JavaScript）为 Chrome 浏览器创建新的扩展程序。

扩展是 Web 平台中使用的HTML、CSS、JavaScript、图像和其他文件的压缩包。可以修改用户浏览并与之交互中的web内容，它们还可以扩展和更改浏览器本身的行为。

配置文件

谷歌插件的核心文件就是配置文件—manifest.json（清单）文件。其中，manifest.json 文件最基本的 Api 如下:

{
    "name": "chrome extension",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "A litlle chrome extension demo"
}

主要是包含所写谷歌插件的名称，版本，以及相关描述。manifest.json作为谷歌插件的核心部分，个人认为该文件对插件来说就相当于一个入口配置文件，开发只需要在这个文件通过配置相应的 js，调用谷歌浏览器提供的Api，来达到完善这个插件的目的。
官网详细配置链接

基本Api使用

google官方提供的Api比较多，google文档也做了归类，大致分为哪些行为操作，我们可以根据行为需求操作去找相应的api去做探索与实践。

在清单文件中还有很多 Api 就不一一列举了，下面只介绍几个个人认为比较重要的几个 Api，通过以下几个 Api 可以使得开发同学对于谷歌插件的开发过程有一个大概的认识。

browser_action

{
    ...

    "browser_action": {
        "default_icon": {
          "16": "1.png",
          "32": "1.png"
        },
        "default_title": "demo extension",
        "default_popup": "popup.html"
    },

    ...
}

browser_action 可设置浏览器右上角的图标，名称。default_popup 可配置点击图标后会出现的一个小窗口，这里可以做一些临时性的操作。

permissions

{
    ...

    "permissions": [ "activeTab", "storage", "tabs", "contextMenus" ],
    
    ...
}

permissions 可配置谷歌插件权限申请，如 contextMenus（右键菜单）, tabs（标签），storage（插件本地存储）。

content_scripts

{
    ...

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

content-scripts，其实就是谷歌插件中向页面注入脚本的一种形式（虽然名为 script，其实还可以包括 CSS 的），借助 content-scripts 可以实现通过配置的方式轻松向指定页面注入 JS 和 CSS。官方解释：

内容脚本允许扩展将逻辑注入页面以读取和修改其内容。内容脚本包含在已加载到浏览器中的页面上下文中执行的 JavaScript。

background

{
    ···

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    ···
}

background一直驻留在浏览器后台的页面可以时刻监听浏览器的各种行为。它是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在 background 里面。

以上，是一些谷歌插件清单文件基本且比较重要的一些 Api。

脚本通信

插件各个模块下的 js 文件是可以相互通信的，分别是属于background字段的background.js，content.js，以及popup.html的js文件popup.js。这三个js文件通过谷歌插件提供的信息交互机制进行通信，彼此传递信息。

==content.js== 可以访问当前页面，但是可能访问的API受到限制。例如，它无法侦听浏览器操作的点击。

==background.js== 该脚本可以访问每个Chrome API，但无法访问当前页面。

那么background和content该如何通信呢？

// content 发出消息
chrome.runtime.sendMessage({ greeting: "content send" }, function (response) {
  console.log("content get response", response);
});
// content 监听消息
chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
  sendResponse({ content: "content get" });
});

// background 监听消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  sendResponse({ content: "background get" });

  // background 发送消息
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    const msg = "background send";
    chrome.tabs.sendMessage(tabs[0].id, msg, function (response) {
      console.log("background get response", response);
    });
  });
});

扩展程序及其内容脚本之间的通信通过使用消息传递进行。任何一方都可以侦听从另一端发送的消息，并在同一通道上响应。chrome提供了简单请求和长期链接。

经过这几天的了解，我们要使用插件更高级的功能，还是需要了解各个 api 的能力，需要大量的google搜索!

本次分享就基于简单的分享对谷歌插件的基本知识，敬请下次继续分享～

2022-06-16