前言

Chrome 插件是我们经常用到的，比如广告屏蔽，浏览器美化，科学上网等。但是你有想过 Chrome 插件是如何开发的吗？出于好奇，今天我们一起从 0 到 1 开发一个超级无敌简单的 Chrome 插件，目的只为入门 Chrome 插件基础开发。

关于 Chrome 插件

Chrome 插件开发官方文档

Chrome 是由 html、js、css 和静态文件等组成的文件集合。

文件结构

插件结构

插件文件结构大致如下：

│  jquery-3.5.1.js
│  manifest.json
│  my.js
│  popup.html
│
└─images
        logo.png
        logo128.png

其中 manifest.json、popup.html 为必选文件，其中 manifest.json 中声明了插件的基本信息，是整个插件的总入口，就连 popup.html 也是在它里面定义的，主要部分 content_scripts 定义了插件生效策略。popup.html 可以理解为插件和用户交互的首页。

manifest.json 内容

{
	"manifest_version": 2,
	"name": "myCtx",
	"version": "1.0",
	"description": "学习chrome插件",
	"icons": {
		"19": "images/logo.png",
		"38": "images/logo.png",
		"128": "images/logo128.png"
	},

	"browser_action": {
		"default_title": "我的第一个Chrome插件",
		"default_icon": "images/logo.png",
		"default_popup": "popup.html"
	},

	"content_scripts": [{
		"matches": [
			"https://www.bilibili.com/*",
			"https://www.baidu.com/*"
			],
		"js": ["my.js"],
		"all_frames": true,
		"run_at": "document_end"
	}],

	"permissions": [
		"tabs"
	]
}

如上，manifest.json 中的 content_scripts 意为：当请求路径匹配到百度和哔哩哔哩时加载 my.js，具体操作在 my.js 中定义。

my.js 内容

console.log("这是插件注入信息>>>:"+document.title);
console.log("开始变红变大");
document.getElementById("su").style.color="red";
document.getElementById("su").style.fontSize="24px";
console.log("变红变大结束");

如上，my.js 中将 ID 为“su”的元素修改为红色，将字体大小修改为 24 像素，其中 ID 为“su”的元素就是百度首页的搜索按钮。实际效果就是当访问百度首页的时候，搜索按钮中的“百度一下”四个字会被修改为红色，同时字体变大为 24 像素。

popup.html 内容

<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				font-family:"Microsoft";
				width:500px;
				min-height:100px;
			}
		</style>
	</head>
	<body>
		<h1>字体变红变大</h1>
	</body>
</html>