我已遵循此 tutorial 并且运行良好,但我无法调试脚本。我想调试的一些函数即使加了断点也没有命中。
manifest.js
{
"name": "My Plugin",
"description": "test plugin",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"web_accessible_resources": [
"toolbar.html"
],
"permissions": ["storage", "activeTab", "scripting", "debugger"], // i put debugger hoping I am able to hit breakpoint but it did not.
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"options_page": "options.html"
}
popup.js - 我希望能够在 setPageBackgroundColor
let toolbar = "";
fetch(chrome.runtime.getURL('/toolbar.html')).then(r => r.text()).then(html => {
toolbar = html;
console.log("this shows in the console log and html is correct" + html);
});
let login = document.getElementById("login");
login.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setPageBackgroundColor,
});
});
function setPageBackgroundColor() { // I added a breakpoint here but is not being hit, or any line breakpoint inside this function. Although I know this is being called and works correctly coz the background changes color and the toolbar is appended to the document body, but still I want to debug when my code gets complex.
chrome.storage.sync.get("color", ({ color }) => {
document.body.style.backgroundColor = color;
});
document.body.insertAdjacentHTML('beforeend', toolbar);
}