夜雨聆风
爬虫必学!Chrome 浏览器插件开发入门(小白版):30 分钟做出第一个可用
这篇是 0 基础入门，目标是先把插件跑起来、理解基本结构。
下一篇我们再讲核心能力：给网页注入脚本（内容脚本 / scripting API）。
1. 先理解：Chrome 插件到底是什么？
你可以把 Chrome 插件理解成三部分：
-
manifest.json：插件的“身份证”，告诉浏览器你是谁、要什么权限、入口在哪。 -
前端页面（比如 popup.html）：点插件图标时弹出的界面。 -
JS 逻辑（比如 popup.js、background.js）：处理点击、存储、监听等行为。
本质上，插件开发就是：前端 + 浏览器 API。
2. 准备工作
你只需要：
-
Chrome 浏览器 -
任意代码编辑器（VS Code 即可） -
一个空文件夹（比如 my-first-extension）
3. 项目结构（先照着建）
my-first-extension/
├─ manifest.json
├─ popup.html
├─ popup.js
└─ background.js
4. 写你的第一个插件
manifest.json
{
"manifest_version": 3,
"name": "我的第一个插件",
"version": "1.0.0",
"description": "一个给小白练手的 Chrome 插件",
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"]
}
popup.html
<!doctype html>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8" />
<title>我的第一个插件</title>
<style>
body { font-family: sans-serif; width: 260px; padding: 12px; }
h3 { margin-top: 0; }
button { width: 100%; padding: 8px; margin-top: 8px; cursor: pointer; }
</style>
</head>
<body>
<h3>插件已运行</h3>
<pid="count">你点击了 0 次</p>
<buttonid="btn">点我 +1</button>
<scriptsrc="popup.js"></script>
</body>
</html>
popup.js
const countEl = document.getElementById("count");
const btn = document.getElementById("btn");
asyncfunctiongetCount() {
const data = await chrome.storage.local.get("clickCount");
return data.clickCount || 0;
}
asyncfunctionsetCount(value) {
await chrome.storage.local.set({ clickCount: value });
}
asyncfunctioninit() {
const count = await getCount();
countEl.textContent = `你点击了 ${count} 次`;
}
btn.addEventListener("click", async () => {
const count = await getCount();
const next = count + 1;
await setCount(next);
countEl.textContent = `你点击了 ${next} 次`;
});
init();
background.js
chrome.runtime.onInstalled.addListener(() => {
console.log("插件已安装");
});
5. 在 Chrome 里加载插件
-
打开 chrome://extensions/ -
右上角打开“开发者模式” -
点击“加载已解压的扩展程序” -
选择 my-first-extension文件夹 -
点击浏览器右上角插件图标，打开你的插件
看到弹窗并能计数，就说明你已经成功入门。
6. 新手最常见的坑
-
manifest_version必须是3（现在主流是 MV3）。 -
改了代码不生效时，去扩展页面点“刷新”。 -
background.js是 Service Worker，不会一直常驻内存。 -
权限别乱加，只申请需要的权限。
7. 下一篇预告：插件注入脚本（重点能力）
你现在已经有了插件骨架。下一篇我们会讲：
-
什么是“注入脚本”，和 popup/background 的关系。 -
如何对“当前网页”执行你自己的 JS。 -
activeTab、scripting权限怎么配。 -
点击按钮后，给网页加提示、改标题、批量提取页面信息。
一句话：这一篇你学会“插件怎么跑起来”，下一篇你学会“插件怎么真正影响网页”。
