Chrome 插件开发实战：分钟上手 + 原理详细说明

一、分钟做出你的第一个插件

Chrome 插件本质上就是一个文件夹，里面放几个文件。

最小结构

hello-extension/
├── manifest.json ← 插件的"身份证"
└── popup.html ← 点击图标弹出的页面

动手做

. 创建 manifest.json

{
"manifest_version": 3。"name": "Hello 插件","version": "1.0","action": {
"default_popup": "popup.html"
}
}

. 创建 popup.html

🎉 成功了！

. 加载到 Chrome

1. 地址栏输入 chrome://extensions/
2. 打开右上角「开发者模式」
3. 点击「加载已解压的 程序」
4. 选择刚才创建的文件夹

点击工具栏图标，看到弹窗就成功了！

二、理解插件的运行方式

插件的三个运行环境

┌──────────────────────────────────────────────────────────────┐
│ Chrome 浏览器 │
│ │
│ ┌────────────────┐ │
│ │ Popup │ 使用者界面 │
│ │ │ • 点击图标时创建。关闭即销毁 │
│ │ │ • 有自己独立的 DOM 和 JS 上下文 │
│ └───────┬────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 网页 │ │
│ │ ┌──────────────────────────────────────────────────┐ │
│ │ │ Content Script │ │
│ │ │ │ │
│ │ └──────────────────────────────────────────────────┘ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────┐ │
│ │ Background │ 后台服务 │
│ │ │ • 监听浏览器事件 • •处理跨页面的逻辑 • 按需唤醒，空闲时休眠 |
│  └────────────────┘                                            |
└───────────────────────────────────────────────────────────────┘

为什么要有 Content Script？

错误做法：直接在 popup.js 中读取 document.cookie

// ❌ 拿到的是插件自己的 Cookie，空的或无效
console.log;按理说，

正确做法：把代码注入到网页执行。让它在网页上下文中读取 Cookie。

// ✅ 注入执行，获取真实网页 Cookie
chrome.scripting.executeScript({
从target来看。{ tabId: tab.id },func: => document.cookie // 在网页里执行这行代码
},=> {
console.log;})，

三种环境的能力对比

​​​ ​​

​​​

​​​​​ ​

​

…

But this is getting messy.

We'll simplify by presenting as plain text bullet list:

能力对比: - 显示界面Popup ✅，Content Script ❌，Background ❌ - 访问网页 DOMPopup ❌，Content Script ✅，Background ❌ - 读取网页 CookiePopup ❌，Content Script ✅，Background ❌ - 发请求携带登录态Popup ❌，Content Script ✅。Background ❌ - 使用 Chrome APIsPopup ✅，Content Script ✅，Background ✅ - 持久运行Popup ❎，Content Script ❎，Background ✅

Continue.

三、权限程序详解

权限声明

{
"permissions":,"host_permissions":
}

常用权限速查

• activeTab: 获取当前标签页 URL、标题。
• scripting: 注入脚本到网页。
• storage: 本地持久化数据。
• cookies: 操作 Cookie。
• tabs: 管理所有标签页。
• notifications: 向使用者推送通知。

host_permissions 的作用

再看示例，

"host_permissions":
// 决定插件只能向 https://example.com/* 注入脚本和读取数据。"

最小权限原则： 只声明实际需要的域名；不要使用 。

四、数据通信机制)

Popup → Content Script:

Easily follow se steps and you’ll have a functional extension within minutes.