开发环境与目录结构

4-1 开启浏览器开发者模式

扩展开发离不开 Chrome 的”开发者模式”。没开它，浏览器不让你加载本地未打包的扩展，你写的代码就进不去浏览器。

打开方式很简单。在地址栏输入 chrome://extensions 并回车，进入扩展管理页。页面右上角有个”开发者模式”开关，把它拨到打开。打开后，页面顶部会出现”加载已解压的扩展程序""打包扩展程序”等按钮，这就说明环境就绪了。如果没看到这些按钮，多半是开关没拨到位，回去确认一下即可。

4-2 选一个顺手的编辑器

扩展本质是网页技术：HTML、CSS、JavaScript（或 TypeScript）。所以你不需要专用 IDE，任何写前端代码的编辑器都行。

新手我推荐 Visual Studio Code，免费、插件多、对 JSON 和 JS 的支持开箱即用。装一个”JSON 校验”类的插件，写清单时能少出低级错误。资深一点，WebStorm、Neovim 也都没问题。重点是能高亮语法、方便看报错就行，工具本身不挑人，别为选编辑器纠结太久。

4-3 扩展目录的基本约定

一个扩展就是一个文件夹。文件夹里必须有一份 manifest.json 作为入口，其余按类型分门别类放。一个典型的干净结构是：

my-extension/
├── manifest.json        # 清单，必需
├── icons/               # 图标
│   └── icon-128.png
├── background.js        # 服务工作者
├── content.js           # 内容脚本
├── popup/               # 弹出页
│   ├── popup.html
│   ├── popup.js
│   └── popup.css
└── options/             # 选项页
    └── options.html

这种分法不是强制，但清晰。把不同部件的 js、html、css 各自成组，后面维护、排错都省心。

你完全可以从一个更精简的结构起步，比如本教程的 Hello World 就只有清单、一个 html、一个 js。等部件变多，再按上面的方式拆开。关键是：别把所有逻辑塞进一个文件，那会让你后期改不动。

4-4 各文件各司其职

manifest.json 是总纲，前面讲过了。其余文件的分工也值得先有个印象。

background.js 是服务工作者脚本，负责监听事件、做统筹。content.js 是注入网页的内容脚本，负责改页面。popup.html 加 popup.js 加 popup.css 合起来是那个小弹出页。

图标不是可有可无。浏览器在工具栏、扩展管理页、安装弹窗都用它。常用尺寸有四种，用途各不同：

尺寸	用途
16×16	扩展页面上的小图标、右键菜单
32×32	Windows 等系统常用
48×48	扩展管理页显示
128×128	安装弹窗与商店展示

4-5 Load Unpacked 加载方式前置说明

“Load Unpacked”中文叫”加载已解压的扩展程序”，是你调试阶段最常用的加载方式：直接把本地文件夹拖进浏览器跑，改完代码刷新即可。

前置条件就两条：开发者模式已开（见 4-1），文件夹里有一份合法的 manifest.json。加载时浏览器会读清单，缺字段或写错会立刻报错，错误会在该页面红字提示。

点下按钮后，浏览器会读取清单、登记里面声明的各个部件，并在工具栏生成图标。整个过程是同步的，几秒内完成。如果清单合法，卡片立刻出现；如果不合法，页面会用红字指出问题字段，你改完刷新即可。

4-6 各部件的调试入口提前知晓

还没写代码，先把”出问题时去哪看”记下来，省得后面抓瞎。

弹出页的日志：右键点弹出页选”检查”，打开的开发者工具就是弹出页的控制台。服务工作者的日志：在 chrome://extensions 点扩展卡片上的”服务工作者”链接，会开一个专属控制台。内容脚本的日志：在网页本身按 F12，和看普通网页日志一样。

4-7 一个小建议：从第一天就规范目录

我见过太多人把全部代码塞进一个 js、图标随手丢根目录，等到功能一多就乱成一团。建议你从第一个扩展起就按 4-3 的结构来，养成习惯。

规范的目录不只为好看。浏览器加载、商店打包、后期排查，全依赖这份清晰。等后面学多文件、多部件通信时，你会发现干净的目录结构能省下大量时间。

我自己的习惯是，每个扩展开工就建好 icons、popup、background 几个空目录，哪怕暂时用不上也先占个位。这样写代码时文件该放哪一目了然，不会临时乱塞，也方便日后回头找。

环境已经就绪，目录也规划好了。下一章我们就写出第一个能跑的扩展——Hello World，把它真正加载进浏览器看看。