Chrome 61 版扩展中的 ES6 模块答案

【问题标题】：ES6 modules in extensions in Chrome version 61Chrome 61 版扩展中的 ES6 模块
【发布时间】：2018-01-25 07:57:18
【问题描述】：

这与ES6 Modules In Google Chrome Extension Development (unexpected token) 不是同一个问题，因为它已经过时并且已经回答了。

Google 发布了一份新闻稿，声称 Chrome 支持 ES6 模块。我正在尝试从扩展中加载模块。我可以从普通页面中加载模块，但不能从扩展中加载。

这是 html，这是扩展上下文中的页面：

<script src="test.js" type="module"></script>

当我打开页面时，我在控制台中看到以下错误消息：

加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

有人有什么建议吗？这是应该向 Chrome 报告的错误吗？还是只是还不支持？我找不到任何直截了当的解释。

【问题讨论】：

它在 Mac 上。该文件是从扩展中本地加载的。 URL 类似于 chrome://extensionid/test/test.html
我认为它最终会成为 chrome 扩展的问题，他们可能需要关闭本地资源的 mime 类型检查，并为具有有效 js 的脚本资源假定默认 mime 类型。现在说我认为还为时过早。
尚不支持，见crbug.com/738739
就是这样@wOxxOm，谢谢！如果您指定您的评论作为答案，我会接受。

标签： javascript google-chrome-extension es6-modules

【解决方案1】：

正如 cmets 中提到的用户 wOxxOm，请参阅 https://crbug.com/738739。

9-18-17 更新：https://bugs.chromium.org/p/chromium/issues/detail?id=769012 看起来正在修复中！

10-19-17 更新：https://bugs.chromium.org/p/chromium/issues/detail?id=728377#c18 报告为在 chrome 64（当前为 canary）中工作

11-13-17 更新：最终更新，在 Chrome 63 中进行测试，模块现在可以工作。请注意，如果您需要在扩展的后台页面加载模块，您不能通过 manifest.json 中的 scripts 属性来完成，而是将 page 设置为 background.html，并在 script 标签中指定 type 模块，这样会绕过清单问题。

【讨论】：

不幸的是，那里报告了另一个错误......无论如何这很有趣，但让我认为 es6 模块至少需要一年的转译器才能进行 chrome 扩展：/

【解决方案2】：

这可能是加载本地文件的错误。我设法为此创建了一个解决方法，但是您仍然会在控制台中收到错误，并且由于我猜的来源问题，您无法在其中使用其他导入语句：

window.addEventListener('load', function () {
    function appendModule(code) {
        let url = URL.createObjectURL(new Blob([code], { type: 'text/javascript' })); // create url from code

        let script = document.createElement('script');
        script.type = 'module';
        script.src = url;
        document.head.appendChild(script);
    }

    let scripts = document.querySelectorAll('script');
    console.log(scripts);
    for (let script of scripts) {
        script.parentElement.removeChild(script);
        if (script.getAttribute('type') !== 'module') continue; // found normal script
        if (script.getAttribute('src') !== null) {
            // load a file
            var request = new XMLHttpRequest();
            request.open('GET', script.getAttribute('src') + '?_=' + Date.now(), true);
            request.onload = function () {
                if (this.status >= 200 && this.status < 400) {
                    // file loaded
                    appendModule(this.response);
                } else {
                    // error loading file
                    console.error('Not able to load module:', script.getAttribute('src'));
                }
            };
            request.onerror = function () {
                // error loading file
                console.error('Not able to load module:', script.getAttribute('src'));
            };
            request.send();
        }
    }
});

    &lt;script src="./script.js" type="module"&gt;&lt;/script&gt;

简而言之：您加载脚本内容，创建一个具有正确类型的Blob，然后从ObjectURL 加载它。

【讨论】：