如何编写 Chrome 插件（Chrome Extension）

### 文章目录

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

---

⚙️ 五、开发环境设置

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

---

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

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"	创建右键菜单

---

🧰 八、调试技巧

• 打开 chrome://extensions/ → 找到插件 → 点击「背景页」或「service worker」查看日志
• 用 console.log() 调试
• 修改文件后点击"刷新"插件即可生效

---

🌐 九、更多进阶能力

• 🔹 使用 chrome.runtime.sendMessage() 实现脚本通信
• 🔹 使用 chrome.storage.sync 保存用户设置
• 🔹 使用 chrome.contextMenus 创建右键菜单
• 🔹 使用 chrome.declarativeNetRequest 拦截网络请求

---