Google chrome extension 如何调试GoogleChrome扩展？

我遵循了这一点，并且工作得很好，但是我无法调试脚本。即使添加了断点，我想要调试的一些函数也没有被命中

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); 
}

---

executeScript在选项卡中运行代码，因此您需要打开选项卡的devtools并添加

调试器在函数内部。