Chrome 插件开发完整教程
目录
准备工作
在开始之前,你需要准备以下几样东西：
- 一台电脑：Windows, macOS, 或 Linux 均可。
- Google Chrome 浏览器：确保你使用的是最新稳定版。
- 一个代码编辑器：强烈推荐 Visual Studio Code (VS Code)，它对插件开发有很好的支持（如语法高亮、代码提示）。
- 基本的 HTML, CSS, JavaScript 知识：插件开发本质上就是 Web 前端技术的应用。
核心概念：插件由什么组成？
一个 Chrome 插件通常由以下几个核心文件组成,它们存放在一个文件夹里：
manifest.json：插件的灵魂，这是一个必须的 JSON 文件，用来定义插件的基本信息，如名称、版本、描述、权限、以及各种功能（如弹出窗口、后台脚本、内容脚本等）的配置，Chrome 浏览器通过这个文件来识别和管理你的插件。popup.html/popup.js/popup.css：弹出窗口，当用户点击插件工具栏图标时，会弹出一个小窗口，这通常用于显示一些快捷操作或信息,它就是一个迷你的网页。background.js：后台脚本，在后台持续运行的脚本，即使插件弹出窗口关闭了它也在运行，它非常适合用来监听事件、管理状态、与外部 API 通信等，从 Chrome 以后，推荐使用 Service Worker (本质上是一个特殊的background.js)。content_scripts.js：内容脚本，可以注入到网页中，直接与网页的 DOM 进行交互，你可以用它来修改网页的样式、抓取数据、或者为网页添加新功能，它无法直接访问后台脚本的变量,但可以通过消息传递进行通信。icons/：图标文件夹，存放不同尺寸的插件图标（如 16x16, 48x48, 128x128 像素）。
工作流程示意图：
manifest.json 告诉 Chrome 需要哪些文件和权限。
popup.html 提供用户交互界面。
background.js 在后台处理逻辑。
content_scripts.js 在特定网页上执行操作。
它们之间可以通过 消息传递 进行通信。
实战：创建你的第一个插件 - "Hello World"
我们将创建一个简单的插件，它会在工具栏显示一个图标，点击图标会弹出一个窗口，显示 "Hello, World!"。
步骤 1：创建项目文件夹
在你的电脑上创建一个新文件夹，my-first-extension。
步骤 2：创建 manifest.json 文件
在 my-first-extension 文件夹中，创建一个名为 manifest.json 的文件,并填入以下内容：
{
"manifest_version": 3,
"name": "我的第一个插件",
"version": "1.0",
"description": "一个简单的 Hello World 插件。",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
字段解释：
manifest_version: 声明 manifest 版本。必须使用 3,这是当前的标准。name: 插件名称。version: 插件版本号。description: 插件描述。action: 定义插件的行为，这里我们配置了点击图标时弹出popup.html,并指定了图标。icons: 插件的图标，用于 Chrome 商店和扩展管理页面。
步骤 3：创建图标文件
在 my-first-extension 文件夹中，再创建一个名为 icons 的子文件夹，然后你需要准备三个图标文件（或者在网上找三个不同尺寸的图片），分别命名为 icon16.png, icon48.png, icon128.png，并放入 icons 文件夹，如果你暂时没有，可以随便用图片代替，但为了后续发布，最好使用清晰、简洁的图标。
步骤 4：创建弹出窗口 (popup.html 和 popup.js)
在 my-first-extension 文件夹中，创建 popup.html 文件：
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 200px;
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<script src="popup.js"></script>
</body>
</html>
再创建 popup.js 文件（虽然现在它里面是空的，但这是一个好习惯）：
// 这里可以写一些交互逻辑，比如点击按钮等
console.log("Popup script loaded.");
步骤 5：加载插件到 Chrome
现在你的项目结构应该是这样的：
my-first-extension/
├── manifest.json
├── popup.html
├── popup.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png- 打开 Chrome 浏览器。
- 在地址栏输入
chrome://extensions并按回车,进入扩展程序管理页面。 - 打开右上角的 “开发者模式” 开关。
- 点击左上角的 “加载已解压的扩展程序” 按钮。
- 在弹出的文件选择窗口中，选择你刚刚创建的
my-first-extension文件夹。
如果一切顺利，你会在扩展程序列表中看到你的插件，Chrome 工具栏右侧会出现你的插件图标。
恭喜！ 点击一下图标，你就能看到 "Hello, World!" 了。
功能详解：常用 API 和功能
了解了基本结构后,我们来探索更强大的功能。
1 权限 (permissions)
在 manifest.json 中，你需要声明插件需要访问哪些资源或 API，这是 Chrome 的安全机制。
{
// ... 其他配置
"permissions": [
"storage", // 访问插件本地存储
"activeTab", // 获取当前激活的标签页
"https://*/*" // 访问所有 HTTPS 网站
],
"host_permissions": [
"https://*.baidu.com/*" // 只能访问百度相关网站
]
}
常用权限：
storage: 存储插件的用户设置或数据。activeTab: 临时获取当前用户正在查看的标签页的权限，比tabs权限更安全。tabs: 获取和管理标签页，例如创建、关闭、切换标签页。notifications: 显示桌面通知。- (或更具体的域名): 访问特定网站的权限,用于内容脚本或网络请求。
2 消息传递
插件内部不同部分（如 popup 和 background，或 popup 和 content script）需要通信时,使用消息传递。
示例：Popup 向 Background 发送消息
-
修改
popup.js:// popup.js document.addEventListener('DOMContentLoaded', function() { const button = document.createElement('button'); button.textContent = '发送消息给后台'; button.style.marginTop = '10px'; button.onclick = () => { chrome.runtime.sendMessage({ greeting: "你好，后台！" }, (response) => { console.log(response); }); }; document.body.appendChild(button); }); -
修改
manifest.json，添加background和permissions:{ // ... 其他配置 "background": { "service_worker": "background.js" }, "permissions": [ "storage", "activeTab", "runtime" // runtime 权限用于消息传递 ] } -
创建
background.js:// background.js chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { console.log("收到来自 popup 的消息:", message); // 可以做一些处理，然后回复 sendResponse({ farewell: "你好，Popup！我收到了。" }); return true; // 表示会异步发送 sendResponse });
重新加载插件后，点击 popup 里的按钮,打开控制台就能看到消息的传递。
3 内容脚本
脚本可以修改网页，我们来做一个简单的例子，在所有网页的标题前加上 "[插件已加载]"。
-
修改
manifest.json，添加content_scripts:{ // ... 其他配置 "content_scripts": [ { "matches": ["<all_urls>"], // 在所有网址上运行 "js": ["content.js"] } ] } -
创建
content.js:// content.js // 等待 DOM 加载完成 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', modifyTitle); } else { modifyTitle(); } function modifyTitle() { const originalTitle = document.title; document.title = "[插件已加载] " + originalTitle; }
重新加载插件，然后打开任意一个网页,你会发现标题前面都加上了我们设定的前缀。
发布插件到 Chrome 应用商店
如果你想与世界分享你的插件，可以将其发布到 Chrome Web Store。
- 注册开发者账号：你需要支付一次性 5 美元 的费用来注册 Google 开发者账号。
- 打包插件：在
chrome://extensions页面，点击“打包扩展程序”，选择你的插件文件夹，会生成一个.crx文件（现在已不推荐）和一个.pem密钥文件。更推荐的方式是直接上传文件夹。 - 创建开发者资料：登录 Chrome 开发者控制台，填写你的开发者信息（名称、描述、网站链接等）。
- 上传插件：点击“新建项目”，上传你的插件文件夹，然后填写插件的详细信息，包括截图、视频演示、详细描述等。
- 提交审核：提交后，Google 的审核团队会检查你的插件是否符合政策和规定，审核通过后，插件就会在 Chrome Web Store 上线。
学习资源与进阶
-
官方文档 (必看)：
- Chrome Extension Documentation (英文)
- Chrome Extension Documentation (中文)：官方也提供了中文文档,质量很高。
-
示例和教程：
- Chrome Extensions Samples (GitHub)：官方提供的各种功能示例代码，是学习 API 用法的最佳资源。
- MDN Web Docs: Chrome extensions：Mozilla 的文档也很棒,提供了更广泛的浏览器扩展视角。
-
社区：
- 在 Stack Overflow 上搜索
google-chrome-extension标签,可以找到大量已解决的问题。 - 关注一些技术博客和开发者社区。
- 在 Stack Overflow 上搜索
进阶方向：
- 使用框架：如 React 或 Vue.js 来构建复杂的弹出窗口和选项页面。
- 打包工具：使用 Webpack 或 Vite 来管理你的项目代码，实现模块化、压缩等。
- 更复杂的 API：探索
chrome.identity(OAuth2 登录),chrome.webRequest(网络请求拦截),chrome.devtools(开发工具面板) 等高级 API。
希望这份教程能帮助你顺利入门 Chrome 插件开发！动手实践是学习最快的方式,祝你开发愉快！
