调试问道：插件故障的诊疗

浏览器插件的开发旅程中，我们时常会遇到“代码已写，功能未达”的窘境。此时，调试便成为我们不可或缺的良医，为我们诊断插件的“病因”，开出“良方”。本章将带你步入“调试之道”，一探插件故障诊疗的奥秘。

从“看到”开始

插件安装完后，出现在哪？

当你开发好一个插件并加载到 Chrome 浏览器中，它会出现在：

//访问地址
chrome://extensions/

在这里你可以看到所有已安装的插件。

如何确认插件是否加载成功？

我们可以通过如下方式来进行一个判断。

• 插件名称是否显示？
• 插件图标是否出现？
• 是否能看到“背景页”链接？（如果有 Service Worker）
• 是否能点击插件图标弹出弹窗？（如果有 popup）

具体模块具体分析

不同类型的插件组件（如弹窗、背景页、内容脚本）对应的调试方式也不同，你具体要调试的是哪一部分？

调试弹窗

点击插件图标，弹出界面

右键 → “检查”

通过DevTools ，显示 popup 页面的 HTML 和 JS

调试Service Worker

打开chrome://extensions/

点击Service Worker链接

调试内容脚本

打开你要调试的网页

按下 F12 或 Cmd + Option + I 打开 DevTools即可

疑难杂症诊断

为什么会显示“Service Worker（无效）”？

出现该问题，则表示插件没加载成功，出现该问题的原因通常有：

针对浏览器冻结，最简单的就是点击一下重新加载插件即可，当然也可以通过代码的形式强制唤醒：

chrome.alarms.create("keepAlive", { periodInMinutes: 1 });
chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === "keepAlive") {
        console.log("Service Worker 被唤醒");
    }
});

内容脚本未注入or注入失败？

“我的插件明明加载了，为什么内容脚本没执行？”有些时候，你可能会发出这样的疑问，这是为啥呢，最常见的原因如下：