ES6 modules in extensions in Chrome version 61

Question

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.

Answer 1

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

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

10-19-17 update: https://bugs.chromium.org/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.

Answer 2

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.