如何在Chrome扩展程序的内容脚本中导入ES6模块 [英] How to import ES6 modules in content script for Chrome Extension

问题描述

在 Chrome 61 中，添加了对JavaScript模块的支持.现在，我正在运行Chrome 63.

In Chrome 61, support for modules in JavaScript was added. Right now I am running Chrome 63.

我正在尝试在Chrome扩展程序内容脚本中使用import/export语法来使用模块.

I am trying to use import/export syntax in Chrome extension content script to use modules.

在 manifest.json 中:

In manifest.json:

"content_scripts": [
    {
        "js": [
            "content.js"
        ],
    }
]

在 my-script.js 中(与 content.js 相同的目录):

In my-script.js (same directory as content.js):

'use strict';

const injectFunction = () => window.alert('hello world');

export default injectFunction;

在 content.js 中:

In content.js:

'use strict';

import injectFunction from './my-script.js';
injectFunction();

我收到此错误: Uncaught SyntaxError: Unexpected identifier

I receive this error: Uncaught SyntaxError: Unexpected identifier

如果将导入语法更改为import {injectFunction} from './my-script.js';，则会出现以下错误: Uncaught SyntaxError: Unexpected token {

If I change the import syntax to import {injectFunction} from './my-script.js'; I get this error: Uncaught SyntaxError: Unexpected token {

在Chrome扩展程序的 content.js 中使用此语法是否存在问题(因为在HTML中必须使用<script type="module" src="script.js">语法)，或者我做错了吗? Google忽略对扩展的支持似乎很奇怪.

Is there some issue with using this syntax in content.js in Chrome extension (since in HTML you have to use <script type="module" src="script.js"> syntax), or am I doing something wrong? It seems strange that Google would ignore support for extensions.

推荐答案

我设法找到了解决方法.

首先，必须要说的是，内容脚本自2018年1月起不支持模块.此解决方法通过将模块script标记嵌入到导致扩展的页面中，从而避开了限制./em>

First of all, it’s important to say that content scripts don’t support modules as of January 2018. This workaround sidesteps the limitation by embedding module script tag into the page that leads back to your extension.

这是我的 manifest.json :

This is my manifest.json:

    "content_scripts": [ {
       "js": [
         "content.js"
       ]
    }],
    "web_accessible_resources": [
       "main.js",
       "my-script.js"
    ]

请注意，我在web_accessible_resources中有两个脚本.

Note that I have two scripts in web_accessible_resources.

这是我的 content.js :

This is my 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作为模块脚本插入到网页中.

This will insert main.js into the webpage as a module script.

我所有的业务逻辑现在都在main.js中.

All my business logic is now in main.js.

要使此方法正常工作，main.js(以及所有我将import编写的脚本)必须位于清单的web_accessible_resources中.

For this method to work, main.js (as well as all scripts that I will import) must be in web_accessible_resources in the manifest.

    'use strict';

    const injectFunction = () => window.alert('hello world');

    export {injectFunction};

在 main.js 中，这是导入脚本的示例:

And in main.js this is an example of importing the script:

    'use strict';

    import {injectFunction} from './my-script.js';
    injectFunction();

这有效！没有错误，我很高兴. :)

This works! No errors are thrown, and I am happy. :)

这篇关于如何在Chrome扩展程序的内容脚本中导入ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！