当前位置：首页 > news >正文

如何编写 Chrome 插件（Chrome Extension）

news 2025/10/28 7:16:38

文章目录
@[toc]
🧩 一、Chrome 插件是什么
🧱 二、基本文件结构
📜 三、manifest.json 基本语法
🧠 四、核心脚本关系
⚙️ 五、开发环境设置
🧩 六、完整案例：点击按钮更改网页背景色
manifest.json
popup.html
popup.js
📡 七、常见权限说明
🧰 八、调试技巧
🌐 九、更多进阶能力

🧩 一、Chrome 插件是什么

Chrome 插件（Extension）本质上是一个 包含网页技术（HTML、CSS、JavaScript、JSON） 的小程序，能与浏览器交互，比如：

修改网页内容
增加右键菜单
操作浏览器标签
与后端通信

🧱 二、基本文件结构

每个插件都是一个文件夹，里面有一个关键文件：manifest.json。
最小结构如下：

my-extension/
│
├── manifest.json     // 插件的“配置文件”
├── background.js     // 后台脚本（控制逻辑）
├── content.js        // 注入网页的脚本
├── popup.html        // 弹出页面
├── popup.js          // 弹出逻辑
└── icon.png          // 图标

📜 三、manifest.json 基本语法

这是插件的「核心配置文件」。

{"manifest_version": 3,"name": "My First Extension","version": "1.0","description": "这是一个示例 Chrome 插件","icons": {"16": "icon.png","48": "icon.png","128": "icon.png"},"permissions": ["tabs", "storage", "activeTab"],"background": {"service_worker": "background.js"},"action": {"default_popup": "popup.html","default_icon": "icon.png"},"content_scripts": [{"matches": ["https://*/*", "http://*/*"],"js": ["content.js"]}]
}

🔹 字段说明：

字段	作用
`manifest_version`	必须是 3（新版标准）
`name` / `version` / `description`	插件基本信息
`icons`	图标文件
`permissions`	插件要用到的浏览器权限
`background`	后台脚本逻辑（常驻）
`action`	插件按钮（右上角小图标）点击后弹出的窗口
`content_scripts`	自动注入网页的脚本

🧠 四、核心脚本关系

文件	执行环境	作用
`background.js`	浏览器后台	处理逻辑、事件、通信
`popup.html / popup.js`	插件弹窗	用户界面与交互
`content.js`	网页环境	操作网页 DOM、注入脚本

⚙️ 五、开发环境设置

使用任意编辑器（推荐 VSCode）
文件保存到一个文件夹，比如：C:\MyExtension
打开 Chrome → 地址栏输入：chrome://extensions/
开启右上角「开发者模式」
点击「加载已解压的扩展程序」→ 选择你的文件夹
插件就加载成功 ✅

🧩 六、完整案例：点击按钮更改网页背景色

manifest.json

{"manifest_version": 3,"name": "Color Changer","version": "1.0","description": "点击按钮改变网页背景色","permissions": ["activeTab", "scripting"],"action": {"default_popup": "popup.html","default_icon": "icon.png"}
}

popup.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>变色插件</title><style>button {width: 120px;height: 40px;font-size: 16px;}</style>
</head>
<body><button id="changeColor">变色！</button><script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById("changeColor").addEventListener("click", async () => {let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });chrome.scripting.executeScript({target: { tabId: tab.id },func: () => {document.body.style.backgroundColor = "#" + Math.floor(Math.random() * 16777215).toString(16);}});
});

👉 点击插件图标 → 弹出窗口 → 点击“变色”按钮 → 当前网页背景颜色随机变化。

📡 七、常见权限说明

权限	用途
`"tabs"`	访问标签页信息
`"storage"`	使用 `chrome.storage` 存储数据
`"scripting"`	向网页注入脚本
`"activeTab"`	操作当前活动页面
`"contextMenus"`	创建右键菜单