如何在 Chrome 擴充功能的內容腳本中載入 ES6 模組？

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

背景：

背景：

問題：

您正在嘗試使用匯入/匯出語法在內容腳本中，但遇到語法錯誤。

解決方案：

有兩種方法在內容腳本中載入模組：

ES 模組的非同步動態import() 函數：
• 聲明要在擴充功能的清單中載入的腳本作為Web 可存取資源。

在內容腳本中使用 import()函數動態導入模組

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

範例：

一般非模組腳本的同步「導入」解決方法：
• 寫入將模組作為普通的非模組腳本。
• 將其名稱新增至清單的「content_scripts」部分中的「js」數組，位於主要內容腳本之前。

直接在內容腳本中存取模組的變數和函數。

注意：非同步動態導入方式更安全、更靈活，但可能會被網站的 Service Worker 阻止。同步“導入”解決方法不太穩健，但可能更可靠。

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