v3擴展沒有DevTools斷點？（顯然是進口問題）-有解無憂

我有一個非常簡單的擴展。

顯現：

"background": { 
    "service_worker": "background.js",
    "type": "module"
  },
  "minimum_chrome_version": "92",

工具.js：

export function ToolsMethod(url) { return ""; }

背景.js：

import "./Tools.js";

function A(info,tab) {
   ToolsMethod(tab.url);
}

chrome.runtime.onInstalled.addListener(() => {

  chrome.contextMenus.create({
    id: "A.id",
    title: "A", 
    contexts:["page"]
  });

const menuItemMap = { A: "A.id" }
const handlerMap = { [menuItemMap.A]:A  }
  
  chrome.contextMenus.onClicked.addListener(function (info, tab) {
    // !!! breakpoint is here 
    const { menuItemId } = info;
    const handler = handlerMap[menuItemId];
    if (handler) handler(info, tab);
  });
  
});

所以，斷點不起作用（devtools 永遠不會停在那里），最重要的是，當我單擊背景關系選單時，永遠不會呼叫 A：什么都沒有發生。

如果我洗掉“import”、“type”并將代碼從 Tools.js 復制到 background.js，它作業正常（仍然沒有除錯）。不過，不是我要找的。

關于如何除錯/修復的任何建議？

UPD：這是可復制的 zip：https ://drive.google.com/file/d/1ElQ857W_opTwXJ7jxMHZuylaoNFEbWTh/view?usp=sharing 復制步驟：

安裝擴展
轉到https://www.amazon.com/dp/B07FC2RN6G?ref=myi_title_dp（只是隨機產品）
預期結果：背景關系選單“Clan URL”將當前頁面 URL 更新為“https://www.amazon.com/dp/B07FC2RN6G”（清理右側的混亂）
當前結果：單擊背景關系選單后沒有任何反應。在斷點處也沒有停止

uj5u.com熱心網友回復：

您進行匯入的方式是錯誤的，以下代碼可以正常作業：

背景.js

import { sayBye, ToolsMethod } from './Tools.js';

chrome.runtime.onInstalled.addListener(() => {

chrome.contextMenus.create({
  id: "A",
  title: "A", 
  contexts:["page"]
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
      console.log(sayBye())
      console.log(ToolsMethod('https://stackoverflow.com'))
});

});

工具.js

export const ToolsMethod = (url) => { return 'Hello World'; }

export function sayBye() {
   return 'Bye'; 
}

匯出要匯出的所有專案的一種更方便的方法是在模塊檔案的末尾使用單個匯出陳述句，然后用逗號分隔的要匯出的功能串列用大括號括起來。

export {ToolsMethod, sayBye };

模塊

清單還必須在擴展的清單中宣告“contextMenus”權限才能使用 API。此外，您應該指定一個 16x16 像素的圖示顯示在您的選單項旁邊。

   {
    "name": "My extension",
    ...
    "permissions": [
        "contextMenus"
    ],
    "icons": {
        "16": "icon-bitty.png",
        "48": "icon-small.png",
        "128": "icon-large.png"
    },
    ...
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515407.html

標籤：javascript调试谷歌浏览器扩展谷歌浏览器开发工具

上一篇：使用.NETc#應用程式從資料庫中選擇資料的問題

下一篇：使用RenderCollision顯示Harfang3D物理除錯？