从零开始构建你的第一个Chrome扩展：实战指南

1. 为什么你应该亲手做一个Chrome扩展？

如果你每天都在用谷歌浏览器，有没有那么一瞬间，觉得某个操作特别繁琐，或者某个网站的功能缺了点什么，心里想着“要是浏览器能自动帮我做这个就好了”？比如，自动高亮页面上的所有价格数字、一键保存网页上的所有图片、或者把某个常看的网站变得清爽无广告……这些想法，其实你都可以自己动手实现，而实现它们的钥匙，就是Chrome扩展。

很多人一听“开发扩展”，就觉得这是专业程序员的事，门槛很高。我刚开始也这么想，但真正动手后才发现，它比想象中简单太多了。本质上，Chrome扩展就是一堆用HTML、CSS和JavaScript写的网页文件，只不过它们能“住”在浏览器里，获得一些特殊的权限，比如读取当前网页的内容、修改网页的样式、或者与浏览器本身交互。你不需要学习一门新的编程语言，如果你会一点前端开发，甚至只是懂一点JavaScript，就已经具备了入门的所有条件。

我做的第一个扩展，是一个简单的“网页暗色模式”工具。当时晚上刷技术文档，白底黑字看得眼睛疼，就想能不能一键把页面变暗。从有这个想法，到做出一个能用的版本，只花了一个周末的下午。当我在自己的浏览器里点击那个小小的图标，整个页面瞬间变成舒适的深灰色时，那种“自己创造工具”的成就感，是直接用别人插件无法比拟的。更重要的是，这个过程让我彻底理解了浏览器插件是怎么工作的，以后再看到任何复杂的插件，我都能大概猜出它的实现思路。

所以，无论你是想解决自己的某个痛点，还是想为你的个人项目或产品增加一个浏览器入口，亦或是单纯想学习一项有趣又实用的技能，从零开始构建一个Chrome扩展，都是一个绝佳的起点。它项目小、反馈快、成就感强，而且做出来的东西立刻就能用。接下来，我就带你一步步走完这个全过程，保证你跟着做，今天就能做出你的第一个扩展。

2. 开工前，先搞懂扩展的“心脏”：Manifest V3

在动手创建文件之前，我们必须先聊聊一个最重要的文件：manifest.json。你可以把它理解为你的扩展的“身份证”和“说明书”。浏览器通过读取这个文件，才知道你的扩展叫什么、需要什么权限、由哪些文件组成。从2023年开始，Chrome扩展全面转向了 Manifest V3 版本，这也是我们学习的重点，因为它更安全、性能更好，也是未来唯一的标准。

Manifest V3 和之前的 V2 有几个关键区别，我踩过坑，这里给你划重点：

1. 后台脚本变了：V2 用的是 background page（一个常驻的隐藏页面），而 V3 改用 service_worker。简单理解，service_worker 更像一个事件监听器，它不常驻内存，只在需要时（比如收到消息、定时触发）才被唤醒，更省电、更安全。对我们开发者来说，写法上要注意，service_worker 里不能直接操作DOM（网页元素）。
2. 权限管理更细：V3 引入了“主机权限”和“API权限”的分离，并且推荐使用更安全的 activeTab 权限（仅在用户点击扩展图标时，临时获取当前标签页的权限），而不是直接请求访问所有网站。
3. 远程代码限制：V3 禁止直接执行远程拉取的代码（比如从你的服务器动态加载一个JS文件），所有执行的代码都必须打包在扩展本地。这是为了安全，防止扩展被恶意篡改。

下面是一个最基础、但功能完整的 Manifest V3 配置文件，我把它放在项目根目录，命名为 manifest.json：

{
  "manifest_version": 3,
  "name": "我的第一个扩展",
  "version": "1.0",
  "description": "一个演示用的Chrome扩展，高亮页面上的数字。",
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon-16.png",
      "48": "icons/icon-48.png"
    }
  },
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "https://*/*",
    "http://*/*"
  ],
  "background": {
    "service_worker": "background/background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/content.js"],
      "run_at": "document_idle"
    }
  ]
}

我来逐行解释一下，这些配置都是干嘛的：

• manifest_version: 固定填 3，声明我们用 V3。
• name 和 description: 扩展的名字和描述，会显示在插件管理页面。
• version: 你自己的版本号，以后更新扩展时要递增。
• icons: 准备三种尺寸的图标（16x16, 48x48, 128x128），分别用在工具栏、插件管理页面和应用商店。我建议你一开始可以用在线工具生成，或者简单画一个。
• action: 定义了点击浏览器工具栏图标时的行为。default_popup 指定了点击后弹出的页面（我们叫它“弹出页”）。
• permissions: 声明扩展需要的浏览器API权限。这里 activeTab 表示我们只在用户与扩展交互（比如点击图标）时，才获取当前标签页的临时权限。scripting 权限是 V3 新增的，允许我们动态执行脚本。
• host_permissions: 声明扩展可以访问哪些网站。<all_urls> 表示所有网址，但为了安全，上线时最好根据实际需要缩小范围（比如只匹配 ["*://*.example.com/*"]）。
• background: 定义后台服务线程（Service Worker）的文件路径。它是扩展的事件处理中心。
• content_scripts: 这是内容脚本的配置。它定义的JavaScript文件会自动注入到匹配的网页中，并可以操作该网页的DOM。run_at 指定注入时机，document_idle 表示等页面基本加载完毕再执行，避免影响页面加载速度。

把这个文件理解透，你的扩展开发就成功了一半。它就像乐高玩具的说明书，告诉浏览器如何组装你的各个功能模块。

3. 搭建你的第一个扩展项目骨架

理解了“说明书”，我们现在来创建实际的“零件”。一个好的项目结构能让开发过程清晰很多，尤其是功能变复杂时。我推荐你按照下面的结构来组织文件夹，这也是很多成熟扩展的做法。

my-first-extension/  （项目根目录）
├── manifest.json    （核心配置文件）
├── icons/           （存放图标）
│   ├──