Chrome插件开发入门：加载与调试扩展全攻略，新手必看

本节目标：学完你能在 chrome://extensions 打开开发者模式，把本地扩展目录加载进浏览器，看懂卡片上的按钮，知道改完代码什么时候要重新加载，并用错误页第一时间定位问题。

写扩展和写普通网页最大的不同，是它没有一个 index.html 双击就能跑。你得把整个扩展目录”装”进浏览器，浏览器才会按 manifest.json 的声明把各个组件跑起来。这一节讲的就是这套加载与调试的基本功，后面每一章的调试都建立在它之上。

46-1 打开扩展管理页与开发者模式

先在地址栏输入 chrome://extensions 回车（Edge 里输入 edge://extensions，界面几乎一样）。这就是扩展管理页，你装过的所有扩展都排在这里。

页面右上角有一个”开发者模式”开关，默认是关的，把它打开。普通用户用不到它，但对开发者来说这是总开关：只有开了它，页面顶部才会多出”加载已解压的扩展程序""打包扩展程序""更新”三个按钮，扩展卡片上也才会出现调试相关的入口。

Note

开发者模式是浏览器级别的设置，开一次就一直生效，换个扩展不用重开。合上开关只是把这些开发者入口藏起来，不会卸载你已加载的扩展。

开发阶段的扩展是一个普通文件夹，里面至少有一个 manifest.json。要把它跑起来，用的就是”加载已解压的扩展程序”（Load Unpacked）。

加载成功后，管理页上会立刻出现一张属于你的扩展卡片。这时扩展就已经真正在浏览器里运行了：声明了 action 的会在工具栏出图标，声明了 content_scripts 的会在匹配页面注入脚本。

Tip

选文件夹时一定要选到含 manifest.json 的那一层。新手常见错误是选了外面的父目录，结果浏览器找不到清单，直接报错加载失败。

加载后的卡片信息量不小，值得逐个认一遍：

把这张卡片当成扩展的”仪表盘”，调试时你的视线基本都在这里来回扫。

这是新手最容易踩的坑：明明改了代码，效果却没变。原因是不同组件的刷新规则不一样。有的改完要手动重新加载扩展，有的只要重新打开就行。

记忆方法很简单：清单、后台、内容脚本这三样，改了就去卡片上点”重新加载”；而 popup、options 这类页面，关掉再打开就是最新的，因为它们每次打开都会重新加载 HTML 和脚本。

Tip

内容脚本要注意”两步刷新”：先在扩展卡片上重新加载扩展，再刷新你测试的那个网页。只做一步，注入的还是旧脚本。

如果加载后卡片上出现红色的”错误”字样，说明浏览器在加载或运行时记录到了问题。点开它，会列出每一条错误的原文、发生的上下文，有时还带出错文件和行号。

调试时的第一反应就应该是：先看”错误”按钮亮没亮，亮了先点开读原文，而不是自己瞎猜。常见的加载期错误包括：

下面这份清单就踩了两个雷，加载时必定失败（错误示范，切勿照抄）：

{
  "manifest_version": "3",
  "name": "Demo",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
  }
}

问题在于 manifest_version 被写成了字符串 "3"，以及 default_popup 那行末尾多了一个逗号。改成数字 3、删掉多余逗号，就能正常加载。

看完错误、改完代码后，点一次卡片上的”重新加载”，红色错误通常就会消失。如果没消失，说明还有其他问题，继续读新的报错。

再补几个高频场景，遇到时对号入座：

“Manifest file is missing or unreadable”：多半是选错了文件夹，没选到含 manifest.json 的那层，重新选一次。
“Could not load manifest”：清单 JSON 语法错了，用编辑器格式化一下，找出多余逗号或引号问题。
图标不显示：icons 或 action.default_icon 指向的图片路径不对，检查文件名和目录。
改了没生效：回到 46-4 的表，确认你改的这类文件到底要不要重新加载。

Note

把报错原文整段复制到搜索引擎，往往一搜就有答案。扩展的错误信息大多很直白，读懂它比记住它更重要。

最后给一套固定流程，几乎所有扩展问题都能照着往下走：

把这套起手式练成肌肉记忆，你就再也不会卡在”装不上""改了没反应”这些入门障碍上。至于 popup、内容脚本、后台各自的调试面板怎么开、怎么看日志，我们放到下一章逐个拆解。