我们通过将 onInstalled 更改为小写的 oninstalled 来中断 Service Worker:
service-worker.js:
// There's a typo in the line below;// ❌ oninstalled should be ✅ onInstalled.chrome.runtime.onInstalled.addListener(()=>{chrome.runtime.oninstalled.addListener(()=>{chrome.storage.sync.set({color:'#3aa757'},()=>{console.log('Thebackgroundcolorisgreen.');});});
刷新并点击错误即可查看错误日志。第一个错误让您知道 Service Worker 注册失败。这意味着启动过程中出了点问题:
在浏览器中打开您的清单文件。例如:
text
chrome-extension://YOUR_EXTENSION_ID/manifest.json
检查文件。
转到应用面板。
转到 Service Workers 窗格。
要测试您的代码,请使用 status 旁边的链接启动或停止 Service Worker。
<ph type="x-smartling-placeholder"></ph>
“Application”面板中的 Service Worker 状态。(点击可放大图片。)
此外,如果您更改了 Service Worker 代码,则可以点击 Update 或 skipWaiting 以立即应用更改。
<ph type="x-smartling-placeholder"></ph>
在 Application 面板中刷新 Service Worker。(点击可放大图片。)
。
调试弹出式窗口
现在,该扩展程序已正确初始化,让我们通过注释掉下面突出显示的代码行来打破弹出式窗口:
popup.js:
...changeColorButton.addEventListener('click',(event)=>{constcolor=event.target.value;// Query the active tab before injecting the content scriptchrome.tabs.query({active:true,currentWindow:true},(tabs)=>{// Use the Scripting API to execute a scriptchrome.scripting.executeScript({target:{tabId:tabs[0].id},args:[color],func:setColor});});});
错误 tabs is undefined 表示扩展程序不知道在哪里注入内容脚本。
如需更正此问题,请调用 tabs.query(),然后选择使用中的标签页。
要更新代码,请点击右上角的全部清除按钮,然后重新加载
。
调试内容脚本
现在,我们将更改变量“color”来中断内容脚本。更改为“colors”:
content.js:
...functionsetColor(color){// There's a typo in the line below;// ❌ colors should be ✅ color.document.body.style.backgroundColor=color;document.body.style.backgroundColor=colors;}