chrome extension 外掛開發的 console.log 要去哪邊看?

假設我已經有新增一個簡單程式

# manifest.json
{
    "manifest_version": 3,
    "name": "TimeTreeExporterChromeExtension",
    "version": "1.0",
    "permissions": [
      "webRequest",
      "activeTab",
      "scripting",
      "storage"
    ],
    "background": {
      "service_worker": "background.js",
      "type": "module"
    },
    "action": {
        "default_popup": "html_funtion.html"
    },
    "host_permissions": [
      "<all_urls>"
    ]
  }

background.js 則是 

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        console.log("details = ", details);
    },
    { urls: ["<all_urls>"] }
);
console.log("chrome.webRequest.onBeforeRequest ");

就是當網頁有任何存取時候吐出資料

但是這樣安裝外掛後會發現在網頁的 Console 上還是看不到 log

 

研究一下發現要從外掛頁面進去

點下去就會看到LOG了

在這邊註記一下