Chrome 擴充功能：在內容腳本中匯入 ES6 模組

Question

在 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>

Answer 1

使用動態import() 函數。

與使用 元素的不安全解決方法不同，此解決方法在相同的安全性JS 環境（內容腳本的隔離世界）中運行，您匯入的模組仍然可以存取全域變量以及初始內容腳本的函數，包括內建的chrome API，例如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": ["<all_urls>"],
     "resources": ["your/content_main.js"]
   }],

// ManifestV2

  "web_accessible_resources": [
     "your/content_main.js"
  ]

了解更多詳情：

• 如何使用 ES6「導入」帶有 Chrome 擴充功能
• #Chrome 擴充功能中 ES6 導入的工作範例
• chrome.runtime.getURL李>

#希望有幫助。

Answer 2

免責聲明

首先，需要說明的是，自 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();

這有效！沒有拋出任何錯誤，我很高興。 :)