Chrome-Erweiterung: ES6-Module in Inhaltsskripte importieren

Question

In Chrome 61 wurde Unterstützung für JavaScript-Module hinzugefügt. Jetzt verwende ich Chrome63. Ich versuche, die Import-/Exportsyntax in einem Inhaltsskript der Chrome-Erweiterung zu verwenden, um Module zu verwenden. In manifest.json: "content_scripts":[{"js":["content.js"],}] In my-script.js (mit Inhalt

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-Erweiterung: ES6-Module in Inhaltsskripte importieren

Antworte allen(2)Ich werde antworten

使用动态import()< /code> 函数。

使用动态`import()< /code>` `函数。`