Chrome 插件开发终极教程
本教程将分为以下几个部分：
- 第一部分：入门基础 - 了解插件是什么，如何搭建开发环境，并创建你的第一个“Hello World”插件。
- 第二部分：核心概念 - 深入理解插件最重要的三个组成部分：
manifest.json、Content Scripts和Background Scripts。 - 第三部分：实战案例 - 开发一个实用的插件，用于修改网页样式（将 B 站的“点赞”按钮变成彩色）。
- 第四部分：高级功能 - 探索更强大的功能，如
Options Page（选项页）、Storage（存储）和Message Passing（消息传递）。 - 第五部分：发布与维护 - 如何打包插件、发布到 Chrome 应用商店以及后续的维护。
第一部分：入门基础
什么是 Chrome 插件？
Chrome 插件（Extension）是用 Web 技术（HTML, CSS, JavaScript）开发的小型程序，它可以用来增强 Chrome 浏览器的功能，广告拦截、翻译工具、网页截图、密码管理器等都是插件。
开发环境准备
你只需要一个文本编辑器（如 VS Code, Sublime Text）和谷歌 Chrome 浏览器。
创建你的第一个插件
步骤 1：创建项目文件夹
在你的电脑上创建一个文件夹，my-first-extension。
步骤 2：创建 manifest.json 文件
这是每个插件都必须的“身份证”或“配置文件”，它告诉 Chrome 关于你的插件的所有基本信息，在 my-first-extension 文件夹中，创建一个名为 manifest.json 的文件,并填入以下内容：
{
"manifest_version": 3,
"name": "我的第一个插件",
"version": "1.0",
"description": "一个简单的 Hello World 插件。",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
manifest_version: 指定清单版本。目前推荐使用 V3。name: 插件名称。version: 插件版本号。description: 插件描述。action: 定义点击浏览器工具栏插件图标时的行为，这里我们让它弹出一个popup.html窗口。icons: 插件图标,建议提供不同尺寸。
步骤 3：创建必要的文件
根据 manifest.json 的配置,我们还需要创建以下文件：
-
icon.png: 一个图标文件，你可以随便找一个 128x128 像素的 PNG 图片,或者从网上下载一个。 -
popup.html: 点击插件图标时显示的弹窗内容。<!DOCTYPE html> <html> <head> <style> body { width: 200px; text-align: center; padding: 10px; } button { width: 80%; padding: 8px; } </style> </head> <body> <h3>你好，世界！</h3> <button id="myButton">点击我</button> <script src="popup.js"></script> </body> </html> -
popup.js:popup.html对应的 JavaScript 文件。document.getElementById('myButton').addEventListener('click', () => { alert('你点击了按钮！'); });
步骤 4：加载插件到 Chrome
- 打开 Chrome 浏览器，在地址栏输入
chrome://extensions并回车。 - 打开右上角的 “开发者模式” 开关。
- 点击左上角的 “加载已解压的扩展程序” 按钮。
- 在弹出的文件选择窗口中，选择你刚刚创建的
my-first-extension文件夹。
恭喜！ 如果一切顺利，你会在 Chrome 的工具栏看到你的插件图标，点击它，会弹出一个 "Hello World" 的窗口，点击按钮还会触发一个 alert,这就是你的第一个插件！
第二部分：核心概念
一个插件通常由三部分组成,理解它们是开发的关键。
manifest.json (清单文件)
这是插件的灵魂，我们已经在上面见过,它定义了：
- 插件的基本信息（名称、版本等）。
- 需要的权限（访问某个网站、读写存储等）。
- 包含哪些脚本和页面。
- 插件的行为（如弹出窗口、右键菜单、浏览器动作等）。
Content Scripts (内容脚本)
作用：在网页内部运行的脚本，它们可以读取和修改网页的 DOM（页面结构），但不能直接访问网页的 JavaScript 变量或 Chrome API（如 chrome.storage）。
特点：
- 运行在网页的上下文中。
- 可以操作网页的 HTML 和 CSS。
- 通过
chrome.runtime.sendMessage与 Background Scripts 通信。
使用场景：修改网页样式、在页面上添加新元素、抓取页面数据等。
Background Scripts / Service Worker (后台脚本/服务工作者)
作用：在后台持续运行的脚本，它不依赖于任何网页，即使没有打开任何标签页，它也可能在运行，它是插件的大脑，负责处理核心逻辑、管理状态、与 Chrome API 交互。
Manifest V3 的变化：
-
在 Manifest V2 中，它叫
background.js。 -
在 Manifest V3 中，它被更现代、更节能的 Service Worker 取代，你可以在
manifest.json中这样定义："background": { "service_worker": "background.js" }
特点：
- 运行在独立的、隔离的上下文中。
- 可以访问所有 Chrome API。
- 不能直接操作网页的 DOM，需要通过 Content Scripts 或
chrome.scripting.executeScript。 - 通过
chrome.runtime.onMessage接收来自 Content Scripts 的消息。
第三部分：实战案例 - 修改 B 站点赞按钮颜色
我们将开发一个插件，当访问 B 站时，自动将页面上的“点赞”按钮背景色变成红色。
步骤 1：更新 manifest.json
我们需要告诉插件，它需要在哪些网站上运行,并注入一个内容脚本。
{
"manifest_version": 3,
"name": "B站点赞变色器",
"version": "1.0",
"description": "将B站的点赞按钮变成红色。",
"content_scripts": [
{
"matches": ["*://*.bilibili.com/*"],
"js": ["content.js"]
}
],
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
content_scripts: 定义了内容脚本的注入规则。matches: 指定在哪些 URL 匹配的网页上注入脚本。*://*.bilibili.com/*表示所有 B 站的子域名和路径。js: 需要注入的 JavaScript 文件列表。
步骤 2：创建 content.js
在项目根目录创建 content.js 文件。
// 使用一个函数来执行修改，方便后续复用或通过消息触发
function changeLikeButtonColor() {
// B站的点赞按钮选择器可能会随着版本更新而改变，这里使用一个常见的
// 可能是 'like-icon' 或者 'video-info-like' 等，需要你用开发者工具确认
const likeButton = document.querySelector('.like-icon');
if (likeButton) {
likeButton.style.backgroundColor = 'red';
console.log('B站点赞按钮已变色！');
}
}
// 方案一：直接执行
// changeLikeButtonColor();
// 方案二：监听页面变化，因为B站是单页应用，页面内容是动态加载的
// 使用 MutationObserver 来监听 DOM 的变化
const observer = new MutationObserver((mutations, obs) => {
// 每次DOM变化后，都尝试查找并修改按钮
changeLikeButtonColor();
});
// 开始观察整个 body 的变化
observer.observe(document.body, {
childList: true, // 观察子节点的添加或删除
subtree: true // 观察所有后代节点
});
// 初始执行一次
changeLikeButtonColor();
步骤 3：加载并测试
- 在
chrome://extensions页面，如果插件已经加载，点击刷新图标（一个循环箭头）来重新加载插件。 - 打开任意一个 B 站视频页面（
https://www.bilibili.com/video/BV1xx411c7mu）。 - 打开浏览器的开发者工具（F12），你应该会看到控制台输出了 "B站点赞按钮已变色！"。
- 查看页面，你应该能看到点赞按钮（通常是心形图标）的背景色已经变成了红色。
第四部分：高级功能
Options Page (选项页)
让用户可以自定义插件的设置。
步骤 1：修改 manifest.json
添加 options_page 字段。
{
// ... 其他配置
"options_page": "options.html",
"options_ui": {
"page": "options.html",
"open_in_tab": true // 在新标签页中打开，体验更好
}
// ...
}
注意: 在 Manifest V3 中，推荐使用
options_ui而不是options_page。
步骤 2：创建 options.html 和 options.js
options.html:
<!DOCTYPE html>
<html>
<head>
<style> body { padding: 10px; } </style>
</head>
<body>
<h2>插件设置</h2>
<label>
点赞按钮颜色：
<input type="color" id="likeColorPicker" value="red">
</label>
<button id="saveButton">保存</button>
<script src="options.js"></script>
</body>
</html>
options.js:
// 保存设置
document.getElementById('saveButton').addEventListener('click', () => {
const color = document.getElementById('likeColorPicker').value;
chrome.storage.sync.set({ 'likeButtonColor': color }, () => {
alert('设置已保存！');
});
});
// 页面加载时读取已保存的设置
window.onload = () => {
chrome.storage.sync.get(['likeButtonColor'], (result) => {
if (result.likeButtonColor) {
document.getElementById('likeColorPicker').value = result.likeButtonColor;
}
});
};
Storage (存储)
Chrome 提供了多种存储方式,用于在插件中持久化数据。
chrome.storage.sync: 同步存储，数据会保存在你的 Google 账户中，并在你登录 Chrome 的所有设备上同步。chrome.storage.local: 本地存储，数据只保存在当前设备上,不同步。chrome.storage.session: 会话存储，数据在插件或浏览器会话期间存在,关闭后即丢失。
Message Passing (消息传递)
让 Content Script 和 Background Script 之间可以互相通信。
场景：用户点击了 popup.html 中的按钮，我们想让 content.js 修改按钮颜色。
修改 popup.js (发送消息):
document.getElementById('myButton').addEventListener('click', () => {
// 获取当前标签页
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
// 向当前标签页的内容脚本发送消息
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: changeLikeButtonColor
});
});
});
// 这个函数会被注入到网页中执行
function changeLikeButtonColor() {
const likeButton = document.querySelector('.like-icon');
if (likeButton) {
// 从 storage 中获取颜色
chrome.storage.sync.get(['likeButtonColor'], (result) => {
likeButton.style.backgroundColor = result.likeButtonColor || 'red';
});
}
}
注意: 在 Manifest V3 中，
chrome.tabs.sendMessage的使用方式有所改变，更推荐使用chrome.scripting.executeScript来直接在目标页面执行函数。
修改 manifest.json (添加权限):
要使用 chrome.scripting，必须在 manifest.json 中申请权限。
{
// ... 其他配置
"permissions": [
"storage",
"scripting"
],
"host_permissions": [
"*://*.bilibili.com/*"
]
// ...
}
第五部分：发布与维护
打包插件
在 chrome://extensions 页面，点击“打包扩展程序”按钮。
- 扩展程序根目录: 选择你的项目文件夹 (
my-first-extension)。 - 私有密钥文件: 第一次可以留空，Chrome 会自动生成一个
.pem文件。请务必保存好这个文件,以后更新插件时需要用到。
打包完成后，你会得到一个 .crx 文件,这就是可以分发给别人的插件文件。
发布到 Chrome 应用商店
- 注册开发者账号: 访问 Chrome Web Store Developer Dashboard，注册并支付一次性 $5.00 的注册费。
- 准备材料: 准备好插件的详细描述、截图、图标等。
- 上传插件: 在 Dashboard 中上传你打包好的插件,并填写所有必要信息。
- 审核: 提交后，Google 的审核团队会检查你的插件是否符合政策和标准，审核通过后,插件就会在应用商店上线。
维护与更新
当你需要更新插件时：
- 修改你的代码。
- 使用之前保存的
.pem私有密钥，再次在chrome://extensions页面打包插件。 - 在 Chrome 应用商店的 Dashboard 中，上传新的
.crx文件并提交更新。
学习资源推荐
- 官方文档: Chrome Extension Developer Guide - 最权威、最全面的资料。
- 示例代码: Chrome Extensions Samples - Google 官方提供的各种示例,是学习高级功能的绝佳资源。
- 社区: Stack Overflow, GitHub 上的开源项目。
希望这份详细的教程能帮助你顺利开启 Chrome 插件开发之旅！祝你编码愉快！
