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

Question

在Chrome61中，新增了對JavaScript模組的支援。現在我運行的是Chrome63。我正在嘗試在Chrome擴展內容腳本中使用import/export語法來使用模組。在manifest.json："content_scripts":[{"js":["content.js"],}]在my-script.js中（與content

P粉739079318 · Answer

使用動態`import()< /code>` `函數。`


與使用

P粉797004644 · Answer

免責聲明

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

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

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

全部回覆(2)我來回復

使用動態import()< /code> 函數。

使用動態`import()< /code>` `函數。`