测试开发之路之chrome插件（一）插件介绍

前言

本文主要是介绍下chrome插件的目录结构和一些文件，带大家初步了解下chrome插件，后面文章会带大家一步一步制作一个chrome插件。

1. 整体架构介绍

Chrome 插件本质上就是一个特殊的 Web 页面，在这个基础上我们明确下文的称谓：
插件页面：指的是插件这个 Web 页面的内容；
目标页：指的是在哪个页面打开插件，该页面就是目标页面，例如在 baidu 打开插件，baidu 此时就是目标页面；
Popup：安装插件时浏览器右上角会有一个插件图标，点击时打开的页面就是 Popup（弹窗）；
Devtools：F12 打开开发者工具后展示在最上面例如 element、network 都是 Devtools；
Tab：下方每个都是单独的 Tab，而中间高亮部分是当前停留的页面，也就是活跃 Tab。

2. 插件目录介绍

2.1 manifest.json (全局配置)

Extensions start with their manifest and every extension requires a manifest.
每个扩展都始于一份 manifest 描述文件并且每个扩展都需要它。

它就类似前端项目中的 package.json 文件，用于描述整个插件的架构和权限
常见配置如下，全部配置👉点击这里查看

{
	// 清单文件的版本，这个必须写，而且必须是3（2已经被废弃）
	"manifest_version": 3,
	// 插件的名称
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",
	// 插件描述
	"description": "简单的Chrome扩展demo",
	// 图标，Chrome 扩展对图标的尺寸有明确要求，必须提供以下尺寸的图标：16x16：用于浏览器工具栏。48x48：用于扩展管理页面（chrome://extensions）。128x128：用于 Chrome 网上应用店。确保图标文件的尺寸符合要求。
	"icons":
	{
		"16": "img/icon16.png",
		"48": "img/icon48.png",
		"128": "img/icon128.png"
	},
	// 会一直常驻的后台JS或后台页面
	"background": {
      "service_worker": "service-worker.js"
    },
	// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
	"action": 
	{
	    "default_icon": {
	      "16": "images/icon-16.png",
	      "48": "images/icon-48.png",
	      "128": "images/icon-128.png"
	    }
		// 图标悬停时的标题，可选
		"default_title": "这是一个示例Chrome插件",
		"default_popup": "popup.html"
	},
	// 需要直接注入页面的JS
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" 表示匹配所有地址
			"matches": ["<all_urls>"],
			// 多个JS按顺序注入
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
			"css": ["css/custom.css"],
			// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，默认document_idle
			"run_at": "document_start"
		},
		// 这里仅仅是为了演示content-script可以配置多个规则
		{
			"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
			"js": ["js/show-image-content-size.js"]
		}
	],
	// 权限申请
	"permissions":
	[
		"contextMenus", // 右键菜单
		"tabs", // 标签
		"notifications", // 通知
		"storage" // 插件本地存储
	],
	"host_permissions": [
	    "http://*/*",
	    "https://*/*"
	],
}

2.2 content-scripts（可选）：给页面注入js / css，无法被DOM调用（定义内容脚本，可以访问和操作网页内容。）

Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension.
内容脚本是在目标页面上下文中运行的文件。通过使用标准的文档对象模型（Document Object Model，DOM），它们能够读取浏览器访问的目标页面的详细信息，对它们进行更改，并将信息传递给它们的父扩展。

官方介绍👉点击这里查看
content-scripts ，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助 content-scripts 我们可以实现通过配置的方式轻松向指定页面注入JS和CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面CSS定制，等等。
首先要在 manifest.json 里配置：

{
	// 需要直接注入页面的JS
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" 表示匹配所有地址
			"matches": ["<all_urls>"],
			// 多个JS按顺序注入
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
			"css": ["css/custom.css"],
			// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，默认document_idle
			"run_at": "document_start"
		}
	],
}

content-scripts 和原始页面共享DOM，但是不共享JS，他的生命周期随着插件的打开和关闭而开始和结束，content_script 有自己独立的上下文，这就意味着它运行在类似沙盒的环境中，此时在 content_script 中修改全局变量，例如 window.a = 1 不会反映到目标页面中，而是修改的沙盒中的 window 变量。如要访问页面JS（例如某个JS变量），只能通过注入js来实现。
content-scripts 不能访问绝大部分 chrome.xxx.api ，除了下面这4种：

• chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
• chrome.i18n
• chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
• chrome.storage

其实看到这里不要悲观，这些API绝大部分时候都够用了，非要调用其它API的话，你还可以通过通信来实现让background来帮你调用（关于通信，后文有详细介绍）。

2.3 service_worker（background）

Events are browser triggers, such as navigating to a new page, removing a bookmark, or closing a tab. Extensions monitor these events using scripts in their background service worker, which then react with specified instructions.
浏览器触发事件，例如导航到一个新页面，删除一个书签，或关闭一个标签。扩展使用后台 service worker 监听这些事件，并在触发时执行回调。

官方介绍👉点击这里查看
service_worker ，是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
service_worker 跑在一个单独的线程，可以使用插件特有的 API，它本质上也是一个 js 文件，和 content_script 的区别在于:

• service_worker 的生命周期更长，浏览器打开时开始，关闭浏览器才会结束。而 content_script 的生命周期跟随插件的打开和关闭。通常使用 service_worker 来监听用户的一些操作从而执行回调。
• service_worker 不能访问目标页面的 DOM，而 content_script 可以。

manifest.json 里配置：

{
	// 会一直常驻的后台JS
	  "background": {
	    "service_worker": "background/service-worker.js",
	    // 如需使用 import 语句，请将 "type" 字段添加到清单并指定 "module"。
	    //"type": "module"
	  },
}

3.3 popup (插件的菜单界面)

浏览器插件右上角的小图标点开时弹出的页面称为 popup，其视图本质上是一个 Web 页面。焦点离开网页就立即关闭，一般用来做一些临时性的交互。
manifest.json 里配置：

{
	"action":
	{
		"default_icon": "img/icon.png",
		// 图标悬停时的标题，可选
		"default_title": "这是一个示例Chrome插件",
		"default_popup": "popup.html"
	}
}

2.4 Devtools（调试工具）

A DevTools extension is structured like any other extension: it can have a background page, content scripts, and other items. In addition, each DevTools extension has a DevTools page, which has access to the DevTools APIs.
DevTools 扩展的结构与其他任何扩展一样：它可以有一个背景页面（service worker）、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，该页面可以访问 DevTools API。

官方介绍👉点击这里查看
Devtools 比较特殊，它需要在 manifest.json 中添加 devtools_page 字段指向一个入口 html 文件，在该文件中需要引入一段 js 来创建 devtools 面板。
manifest.json 里配置：

{
	"devtools_page": "devtools/index.html"
}

Devtools 入口 html 文件 devtools.html 中需要引入一段 js 脚本来创建 devtools 面板。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>chrome-devtools-demo</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="devtools.js"></script>
    <script type="module" src="../popup/main.js"></script>
</body>
</html>

devtools.js文件：

chrome.devtools.panels.create(
    // 扩展面板显示名称
    "chrome-extensions-devtools-demo",
    // 扩展面板icon，并不展示
    "icons/icon_48x48.png",
    // 扩展面板页面
    "devtools/index.html",
    function (panel) {
        console.log("自定义面板创建成功！");
    }
);

main.js文件：

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import Devtools from '../devtools/Devtools.vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);
const devtools=createApp(Devtools);

if (window.location.pathname === '/devtools/index.html') {
    devtools.use(Antd).mount('#app')
}else{
   app.use(Antd).mount('#app');
}

面板创建逻辑仅在 DevTools 打开时执行一次，安装插件打开 F12 即可看到 Devtools 面板：

详细创建项目流程我们会在下一篇博客里详细介绍，本文我们只需了解这些文件作用即可。