chrome新建插件代码（Chrome插件从零开始开发指南）
chrome新建插件代码（Chrome插件从零开始开发指南）创建一个 manifest.json 文件那我们就开始吧！先创建一个文件夹，命名为 start，然后用编辑器打开文件夹，开始编码啦，我使用的是vscode，当然任何编辑器都可以完成这项编码。点击右键插件中的选项按钮，将触发option 事件，唤起 options.html 页面当插件被载入后，将后台执行 background.js 脚本我们将按照官方示例完成一个示例工程，在这个工程中，我们将提供一个可以设置网页背景颜色的小工具，并且在配置页面提供多个颜色供用户选择。
简介嗨，各位极客；在你的浏览器中装上了多少插件呢？让我猜猜：tampermonkey 油猴脚本，Chrono下载管理器，bilibilihelper，喔当然还有必不可少的 Adblock。有了解过这些插件是怎么运作的么？想要完成一个自己的插件么？快和我一起动手吧！
基础知识本文参考 Chrome Extensions V3版本 开发指南，接下来我们简单地介绍一下一个插件的组成，
Chrome 插件通常由以下几部分组成：
- manifest.json：插件的 meta 信息，包含插件的名称、版本号、图标、脚本文件名称等信息，从这里你可以看到全部的参数。
- popup：点击插件触发的弹框页面，会创建一个独立的浏览器页面实例。
- options：插件的扩展配置页面，会创建一个独立的浏览器页面实例。
- background.js：插件的后台运行脚本，单独地运行在一个浏览器实例中。
{
"manifest_version": 3
"name": "Chrome 插件开发 示例"
"description": "这是一个 Chrome 开发示例工程"
"version": "1.0"
"permissions": [ // 插件需要的权限信息 依次为：数据存储、访问活跃的标签页、执行插入脚本
"storage" "activeTab" "scripting"
]
// 时间
"action": {
// 设置插件在插件区域的icon
"default_icon": {
"16": "readIcon.png"
"32": "readIcon.png"
"64": "readIcon.png"
"128": "readIcon.png"
}
// 插件在插件区域被点击时的弹出页面
"default_popup": "popup.html"
}
// 后台运行脚本
"background": {
"service_worker": "background.js"
}
// 全局icon 会出现在配置页面的icon中
"icons": {
"16": "bookIcon.png"
"32": "bookIcon.png"
"64": "bookIcon.png"
"128": "bookIcon.png"
}
// 配置页面
"options_page": "options.html"
}popup 事件
在插件区域点击咱们插件后将触发popup 事件，唤起 popup.html 页面
option 事件点击右键插件中的选项按钮，将触发option 事件，唤起 options.html 页面
当插件被载入后，将后台执行 background.js 脚本
我们将按照官方示例完成一个示例工程，在这个工程中，我们将提供一个可以设置网页背景颜色的小工具，并且在配置页面提供多个颜色供用户选择。
那我们就开始吧！先创建一个文件夹，命名为 start，然后用编辑器打开文件夹，开始编码啦，我使用的是vscode，当然任何编辑器都可以完成这项编码。
创建 manifest.json 描述文件创建一个 manifest.json 文件
{
"manifest_version": 3
"name": "Chrome 插件开发 示例"
"description": "这是一个 Chrome 开发示例工程"
"version": "1.0"
"permissions": [
"storage" "activeTab" "scripting"
]
"background": {
"service_worker": "background.js"
}
"icons": {
"16": "icon.png"
"32": "icon.png"
"64": "icon.png"
"128": "icon.png"
}
}
找一张你喜欢的照片，命名为icon并添加到文件夹中，这里先没有配置popup页面和option页面，不着急，一步步来。
Background Js 后台执行程序创建一个 background.js 文件
// 初始化一个颜色值
let color = '#3aa757';
// 在chrome浏览器创建的时候，设置颜色初始值
chrome.runtime.onInstalled.addListener(() => {
// 需要注意的是，此时设置的持久对象的键名为 color 其值为 #3aa757
chrome.storage.sync.set({ color });
console.log('设置一个默认的颜色，默认颜色值为绿色 %cgreen' `color: ${color}`);
});
然后就可以尝试一下插件的运行啦，进入插件页面，先在右上角开启开发者模式，然后点击加载已解压的扩展程序，找到你的 start 文件夹加载进来。
此时页面上就会出现你的插件了，你会发现在有一个Service Worker视图可以点击，点击查看一下
你就可以看到 background.js 成功运行并打印了日志
接下来我们配置一个弹出页面，创建 popup.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>插件弹出页面</title>
<link rel="stylesheet" href="button.css">
</head>
<body>
<button id="changeColor"></button>
<img url="icon.png"/>
<!-- 引入js -->
<script src="popup.js"></script>
</body>
</html>
创建 popup.js
// 获得 改变颜色的按钮
let changeColor = document.getElementById("changeColor");
// 获取当前已设置颜色
chrome.storage.sync.get("color" ({ color }) => {
changeColor.style.backgroundColor = color;
});
// 创建按钮点击事件 触发对当前激活的浏览器窗口中的当前激活的选项卡设置背景颜色
changeColor.addEventListener("click" async () => {
let [tab] = await chrome.tabs.query({ active: true currentWindow: true });
// 注入执行js代码
chrome.scripting.executeScript({
target: { tabId: tab.id }
function: setPageBackgroundColor
});
});
// 注入执行的方法块
// 设置body的背景颜色为目标颜色
function setPageBackgroundColor() {
chrome.storage.sync.get("color" ({ color }) => {
document.body.style.backgroundColor = color;
});
}
创建 button.css
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}
button.current {
box-shadow: 0 0 0 2px white
0 0 0 4px black;
}
喔当然，还要修改 manifest.json，添加上 popup.html的配置，还需要准备一张在插件区域展示的 popupIcon 照片。
{
"manifest_version": 3
"name": "Chrome 插件开发 示例"
... 省略 ...
"128": "icon.png"
}
"action": {
"default_icon": {
"16": "popupIcon.png"
"32": "popupIcon.png"
"64": "popupIcon.png"
"128": "popupIcon.png"
}
"default_popup": "popup.html"
}
}
然后在插件页面刷新重新加载
这时候我们就可以点击插件啦，按照1点击插件，然后点击2，触发按钮事件
bingo! 当前页面的背景颜色变成绿色了。
似乎只有一个绿色不太合适，我们得为用户提供更多的选择，那就再做一个选项页面，提供配置功能吧。
Option 选项配置页面创建 options.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>插件选项配置页面</title>
<link rel="stylesheet" href="button.css">
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>选择一个新的背景颜色</p>
</div>
<script src="options.js"></script>
</body>
</html>
创建 options.js
// 获取按钮区域 div
let page = document.getElementById("buttonDiv");
// button.css 有一个 button current css 样式，为选中的颜色添加出黑色边框
let selectedClassName = "current";
// 设置待选颜色按钮
const presetButtonColors = ["#3aa757" "#e8453c" "#f9bb2d" "#4688f1"];
// 创建按钮事件 通过标记所选按钮 保存颜色
function handleButtonClick(event) {
// 从事件的父级中找到之前被选中的按钮
let current = event.target.parentElement.querySelector(
`.${selectedClassName}`
);
// 从他的class列表中去掉选中状态
if (current && current !== event.target) {
current.classList.remove(selectedClassName);
}
// 获取按钮携带的数据信息 也就是我们想要的颜色
let color = event.target.dataset.color;
// 添加选中状态
event.target.classList.add(selectedClassName);
// 设置当前选中颜色
chrome.storage.sync.set({ color });
}
// 按颜色列表依次添加按钮到页面
function constructOptions(buttonColors) {
// 获取当前已设置的颜色
chrome.storage.sync.get("color" (data) => {
let currentColor = data.color;
// 循环颜色列表
for (let buttonColor of buttonColors) {
// 创建按钮 赋予按钮颜色
let button = document.createElement("button");
button.dataset.color = buttonColor;
button.style.backgroundColor = buttonColor;
// 如果是当前已选中的按钮，则设置
if (buttonColor === currentColor) {
button.classList.add(selectedClassName);
}
// 创建点击事件
button.addEventListener("click" handleButtonClick);
// 添加回页面上
page.appendChild(button);
}
});
}
// js 被加载后 自执行初始化方法 创建按钮
constructOptions(presetButtonColors);
然后再修改一次 manifest.json
{
"manifest_version": 3
"name": "Chrome 插件开发 示例"
... 省略 ...
"default_popup": "popup.html"
}
"options_page": "options.html"
}
然后再重载一次插件，bingo！右键我们的插件就多出选项页面啦
点击进入选项页面，出现了我们在代码中配置的四个颜色了，随便点选其他三种颜色。
我们就可以惊喜的发现在popup页面的按钮颜色也发生了变化了。
至此，我们的起步示例工程的开发就完成了。
在这次工程中，我们完成了配置基本信息、开发了popup 弹出页面、option 配置页面，并实现了多页面间的数据共享功能，并了解到各个页面间的通信都需要通过第三者进行处理，因为本质上每个页面都是独立的进程。
那我想提个小问题，如果我想在选项配置页面选择了颜色之后，然后再点击到一个具体的选项卡中自动帮我修改背景颜色，应该怎么实现呢？
谷歌插件示例工程
https://github.com/GoogleChrome/chrome-extensions-samples
谷歌插件官方文档
https://developer.chrome.com/docs/extensions/
