5.1 Chrome 浏览器插件开发
🚨
【2025年重要提醒】必须使用 Manifest V3!
Chrome已在2024年6月开始全面淘汰 Manifest V2扩展。
如果你用老教程(V2)开发插件,会遇到:
- ❌ 无法发布到Chrome应用商店
- ❌ 用户无法安装
- ❌ 已安装的会被自动禁用
放心: 本教程所有示例都基于Manifest V3,可以直接使用!
如何识别老教程: 如果看到"manifest_version": 2,立即跳过!必须是"manifest_version": 3!
为什么要学 Chrome 插件？
优势：
- 📦 轻量级：几十KB就能实现强大功能
- 🚀 快速部署：开发完立即使用，无需服务器
- 💰 变现容易：Chrome Web Store 全球分发
- 🔧 需求旺盛：自动化、效率提升类插件永远有市场
真实案例：
- TabMagnet：解决「新标签总是在最右边」的痛点 → 日活 500+
- Word to Markdown：一键复制网页为 Markdown → 开发者必备工具
Chrome Extension 基础架构
核心概念图解
Chrome Extension 架构
┌─────────────────────────────────────────────┐
│ manifest.json (配置文件 - 插件的身份证) │
├─────────────────────────────────────────────┤
│ │
│ ┌───────────────┐ ┌──────────────┐ │
│ │ Popup (弹窗) │ │ Background │ │
│ │ - popup.html │◄────►│ (后台脚本) │ │
│ │ - popup.js │ │ - service │ │
│ │ │ │ worker │ │
│ └───────────────┘ └──────────────┘ │
│ ▲ ▲ │
│ │ │ │
│ ▼ ▼ │
│ ┌────────────────────────────────────┐ │
│ │ Content Script (内容脚本) │ │
│ │ - 可以访问和修改网页DOM │ │
│ │ - 注入到每个标签页 │ │
│ └────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
▲
│ 交互
▼
┌──────────┐
│ 用户网页 │
└──────────┘各部分职责
| 组件 | 作用 | 类比 |
|---|---|---|
| manifest.json | 配置权限、声明资源 | 身份证 + 说明书 |
| Popup | 点击图标弹出的界面 | App的主界面 |
| Background | 后台持续运行的脚本 | 操作系统的守护进程 |
| Content Script | 注入到网页中的脚本 | 网页的「外挂」 |
实战：创建第一个 Chrome 插件
【案例1】Hello World 插件
功能：点击插件图标，弹出「Hello World」
第 1 步：创建项目文件夹
mkdir my-first-extension
cd my-first-extension第 2 步：创建 manifest.json
{
"manifest_version": 3,
"name": "Hello World Extension",
"version": "1.0.0",
"description": "我的第一个 Chrome 插件",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"permissions": []
}字段说明：
manifest_version: 必须是 3（最新版本）name: 插件名称action.default_popup: 点击图标时显示的HTMLpermissions: 需要的权限列表（暂时为空）
第 3 步：创建 popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
width: 300px;
padding: 20px;
font-family: Arial, sans-serif;
}
h1 {
color: #4285f4;
font-size: 24px;
}
button {
background: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background: #357ae8;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个 Chrome 插件</p>
<button id="clickMe">点击我</button>
<script src="popup.js"></script>
</body>
</html>第 4 步：创建 popup.js
// 等待 DOM 加载完成
document.addEventListener('DOMContentLoaded', function() {
// 获取按钮元素
const button = document.getElementById('clickMe');
// 点击按钮时的处理
button.addEventListener('click', function() {
alert('你好！这是你的第一个 Chrome 插件！');
});
});第 5 步：加载插件到 Chrome
- 打开 Chrome 浏览器
- 访问
chrome://extensions/ - 打开右上角「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择你的项目文件夹
- 完成！点击工具栏的插件图标试试
成功标志：
- ✅ 工具栏出现插件图标
- ✅ 点击图标弹出弹窗
- ✅ 点击按钮出现 alert
如果弹窗没有反应，先打开 chrome://extensions 勾选”错误”查看报错信息，再复制给 AI 帮忙排查。
Last updated on