javascript - ES6 modules in extensions in Chrome version 61 - Stack Overflow

admin管理员组

文章数量:1291320

This is not the same question as ES6 Modules In Google Chrome Extension Development (unexpected token) as that is both outdated and already answered.

Google produced a news release claiming Chrome supports ES6 modules. I am trying to load a module from within an extension. I am able to load a module from within a normal page, but not from within an extension.

Here is the html, this is a page in an extension context:

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

When I open the page, I see the following error message in the console:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Does anyone have any advice? Is this a bug that should be reported to Chrome? Or is it just not yet supported? I could not locate any straightforward explanation.

This is not the same question as ES6 Modules In Google Chrome Extension Development (unexpected token) as that is both outdated and already answered.

Google produced a news release claiming Chrome supports ES6 modules. I am trying to load a module from within an extension. I am able to load a module from within a normal page, but not from within an extension.

Here is the html, this is a page in an extension context:

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

When I open the page, I see the following error message in the console:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Does anyone have any advice? Is this a bug that should be reported to Chrome? Or is it just not yet supported? I could not locate any straightforward explanation.

• javascript
• google-chrome-extension
• es6-modules

Share Improve this question Follow edited Jan 4, 2018 at 12:29 Josh asked Aug 17, 2017 at 3:09 JoshJosh 18.7k77 gold badges5454 silver badges7272 bronze badges 4

• It's on a Mac. The file is locally loaded from within the extension. The URL is something like chrome://extensionid/test/test.html – Josh Commented Aug 17, 2017 at 3:25
• 1 I think it'll eventually bee an issue with chrome extensions and they might need to turn off mime-type checking on local resources and assume a default mime type for script resources with a valid js one. It's still pretty early to say I'd think. – MinusFour Commented Aug 17, 2017 at 3:38
• 1 Not yet supported, see crbug./738739 – woxxom Commented Aug 17, 2017 at 5:21
• That's it @wOxxOm, thanks! If you specify your ment as an answer I will accept it. – Josh Commented Aug 17, 2017 at 11:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

As user wOxxOm mentioned in ments, see https://crbug./738739.

9-18-17 update: https://bugs.chromium/p/chromium/issues/detail?id=769012 looks like it is being fixed!

10-19-17 update: https://bugs.chromium/p/chromium/issues/detail?id=728377#c18 reported as working in chrome 64 (currently canary)

11-13-17 update: final update, testing in Chrome 63, modules are now working. Note that if you need to load a module in the background page of the extension, you cannot do it via scripts property in manifest.json, instead set page to background.html, and specify type module in script tag, and that will bypass the manifest issue.

It could be a bug with loading local files. I managed to create a workaround for that, but you will still get an error in the console and you can not use other import statements within due to origin issues I guess:

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();
        }
    }
});

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

In short: You load the script content, create a Blob with correct type and load it from a ObjectURL.

本文标签： javascriptES6 modules in extensions in Chrome version 61Stack Overflow