在 Chrome 61 中，加入了對 JavaScript 模組的支援。現在我跑的是 Chrome 63。
我正在嘗試在 Chrome 擴充內容腳本中使用 import/export 語法來使用模組。
在manifest.json：
"content_scripts": [ { "js": [ "content.js" ], } ] 在my-script.js（與content.jscontent.js同一目錄）：
'use strict'; const injectFunction = () => window.alert('hello world'); export default injectFunction; 在content.js：
'use strict'; import injectFunction from './my-script.js'; injectFunction();
我收到此錯誤：未捕獲的語法錯誤：意外的識別碼
如果我將導入語法更改為import {injectFunction} from './my-script.js'; 我收到此錯誤： Uncaught SyntaxError: Unexpected token {< /p>
在Chrome 擴充功能中的content.js 中使用此語法是否有問題（因為在HTML 中您必須使用< ;code>
使用動態
import()函數。與使用
元素的不安全解決方法不同，此解決方法在相同的安全性JS 環境（內容腳本的隔離世界）中運行，您匯入的模組仍然可以存取全域變量以及初始內容腳本的函數，包括內建的chromeAPI，例如chrome.runtime.sendMessage。在
content_script.js中，它看起來像(async () => { const src = chrome.runtime.getURL("your/content_main.js"); const contentMain = await import(src); contentMain.main(); })();您還需要在清單的Web 可存取資源中宣告匯入的腳本：
// ManifestV3
"web_accessible_resources": [{ "matches": [""], "resources": ["your/content_main.js"] }], // ManifestV2
了解更多詳情：
chrome.runtime.getURL李>#希望有幫助。
免責聲明
首先，需要說明的是，自 2018 年 1 月起，內容腳本不支援模組。此解決方法透過將模組
script標記嵌入到返回的頁面中來避開限製到您的擴充功能。這是一個不安全的解決方法！
網頁腳本（或其他擴充功能）可以透過在
Object.prototype和其他原型上使用setter/getter、代理程式來利用您的程式碼並提取/欺騙資料函數和/或全域對象，因為script元素內的程式碼在頁面的JS 上下文中運行，而不是在預設情況下運行內容腳本的安全隔離JS 環境中。一個安全的解決方法是此處的另一個答案中顯示的動態
import()。解決方法
這是我的
manifest.json："content_scripts": [ { "js": [ "content.js" ] }], "web_accessible_resources": [ "main.js", "my-script.js" ]請注意，我在
web_accessible_resources中有兩個腳本。這是我的
content.js：'use strict'; const script = document.createElement('script'); script.setAttribute("type", "module"); script.setAttribute("src", chrome.extension.getURL('main.js')); const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; head.insertBefore(script, head.lastChild);這會將
main.js作為模組腳本插入網頁中。我的所有業務邏輯現在都在
main.js中。要使此方法發揮作用，
main.js（以及我將導入的所有腳本）必須位於中清單中的web_accessible_resources。用法範例：
#my-script.js'use strict'; const injectFunction = () => window.alert('hello world'); export {injectFunction};在
main.js中，這是匯入腳本的範例：'use strict'; import {injectFunction} from './my-script.js'; injectFunction();這有效！沒有拋出任何錯誤，我很高興。 :)