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

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

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

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

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

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

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

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


javascript es6-modules google-chrome-extension
person Josh    schedule 17.08.2017    source источник
comment
Это на Mac. Файл загружается локально из расширения. URL-адрес выглядит примерно так: //extensionid/test/test.html.   -  person Josh    schedule 17.08.2017
comment
Я думаю, что в конечном итоге это станет проблемой с расширениями Chrome, и им, возможно, придется отключить проверку MIME-типа на локальных ресурсах и принять тип MIME по умолчанию для ресурсов скрипта с допустимым js-типом. Еще рано говорить, что я думаю.   -  person MinusFour    schedule 17.08.2017
comment
Еще не поддерживается, см. crbug.com/738739   -  person wOxxOm    schedule 17.08.2017
comment
Вот и все @wOxxOm, спасибо! Если вы укажете свой комментарий в качестве ответа, я его приму.   -  person Josh    schedule 17.08.2017

Ответы (2)


arrow_upward
9
arrow_downward

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

Обновление 9-18-17: https://bugs.chromium.org/p/chromium/issues/detail?id=769012 похоже, что это исправлено!

Обновление 19.10.2017: https://bugs.chromium.org/p/chromium/issues/detail?id=728377#c18 сообщил, что работает в chrome 64 (в настоящее время canary)

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

person Josh    schedule 28.08.2017
comment
к сожалению, там была обнаружена еще одна ошибка ... в любом случае это интересно, но заставляет меня думать, что модулям es6 потребуется транспилятор как минимум еще на один год для расширений Chrome: / - person YangombiUmpakati; 31.10.2017

arrow_upward
0
arrow_downward

Это может быть ошибка загрузки локальных файлов. Мне удалось создать обходной путь для этого, но вы все равно получите ошибку в консоли, и вы не сможете использовать другие операторы импорта из-за проблем с происхождением, я думаю:

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>

Вкратце: вы загружаете содержимое скрипта, создаете Blob с правильным типом и загружаете его из ObjectURL.

person Bellian    schedule 13.09.2017