Модули ES6 в расширениях в версии Chrome 61

Это не тот же вопрос, что Модули ES6 в Google Extension Development (неожиданный токен), поскольку они устарели и уже ответили.

Google выпустила пресс-релиз, в котором утверждается, что Chrome поддерживает модули ES6. Я пытаюсь загрузить модуль из внутреннего расширения. Я могу загрузить модуль с нормальной страницы, но не изнутри расширения.

Вот html, это страница в контексте расширения:

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

Когда я открываю страницу, в консоли появляется следующее сообщение об ошибке:

Не удалось загрузить модуль script: сервер ответил несимметричным MIME-типом "". Строгая проверка типа MIME применяется для скриптов модуля для спецификации HTML.

Есть ли у кого-нибудь советы? Это ошибка, о которой следует сообщить Chrome? Или это еще не поддерживается? Я не мог найти прямого объяснения.

Ответы

Ответ 1

Как пользователь wOxxOm, упомянутый в комментариях, см. https://crbug.com/738739.

9-18-17 update: 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 (в настоящее время канарейский)

11-13-17 обновление: окончательное обновление, тестирование в Chrome 63, теперь работают модули. Обратите внимание: если вам нужно загрузить модуль на фоновой странице расширения, вы не можете сделать это через свойство scripts в manifest.json, вместо этого установите страницу на background.html и укажите модуль типа в теге script, и это будет обойти проблему манифеста.

Ответ 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();
        }
    }
});
    <script src="./script.js" type="module"></script>