如何將 ES6 模組匯入 Chrome 擴充內容腳本？

在Chrome 擴充內容腳本中導入ES6 模組

問題：

在Chrome 63 中，使用import/ 導入ES6 模組內容腳本中的匯出語法導致語法錯誤。

原因：

與 HTML 腳本不同，內容腳本本身不支援模組載入。

解決方案：非同步動態導入（ ) 函數

要解決此問題，請使用下列指令解決方法：

1. 在manifest.json 中，將模組腳本宣告為可透過Web 存取的資源。
2. 在 content_script.js 中，使用import() 函數非同步載入您的模組。
3. 等待導入並運行您的 main 函數模塊.

示例：

manifest.json：

{
  "web_accessible_resources": [
    {
      "matches": ["<all_urls>"],
      "resources": ["my-module.js"]
    }
  ],
  ...
}

content_script.js:

(async () => {
  const src = chrome.runtime.getURL("my-module.js");
  const module = await import(src);
  module.main();
})();

同步導入解決方法

或者，您可以對非模組腳本使用同步導入解決方法：

1. 將腳本加入到manifest 中的「js」陣列。 json.
2. 直接在主要內容中引用腳本的全域變數和函數腳本。

以上是如何將 ES6 模組匯入 Chrome 擴充內容腳本？的詳細內容。更多資訊請關注PHP中文網其他相關文章！