Moduły ES6 w rozszerzeniach w wersji Chrome 61

Question

To nie jest to samo pytanie, co ES6 Modules In Google Chrome Extension Development (unexpected token), ponieważ jest zarówno nieaktualne, jak i już udzielone.

Google opublikował informację prasową, twierdząc, że Chrome obsługuje moduły ES6. Próbuję załadować moduł z wewnątrz rozszerzenia. Mogę załadować moduł z poziomu normalnej strony, ale nie z wewnętrznego rozszerzenia.

Oto html, to strona w kontekście rozszerzenia:

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

Kiedy otworzyć stronę, widzę następujący komunikat o błędzie w konsoli:

Nie udało się załadować skrypt modułu: serwer odpowiedział MIME typu "" inny niż JavaScript. Rygorystyczne sprawdzanie typu MIME jest wymuszane dla skryptów modułów na specyfikację HTML.

Czy ktoś ma jakieś porady? Czy to błąd, który należy zgłosić w Chrome? A może po prostu nie jest jeszcze obsługiwane? Nie mogłem znaleźć żadnego prostego wyjaśnienia.

Answer 1

Jako użytkownik wOxxOm wymienione w komentarzach, zobacz https://crbug.com/738739.

Aktualizacja 9-18-17: https://bugs.chromium.org/p/chromium/issues/detail?id=769012 wygląda na to, że zostało naprawione!

10-19-17 zmiana: https://bugs.chromium.org/p/chromium/issues/detail?id=728377#c18 zgłoszony jako pracujący w Chrome 64 (obecnie Kanaryjskich)

11-13-17 aktualizacji: Ostateczna aktualizacji, testowania w Chrome 63, moduły pracują obecnie. Zauważ, że jeśli chcesz załadować moduł na stronę tła rozszerzenia, nie możesz tego zrobić za pomocą właściwości skryptów w pliku manifest.json, zamiast tego ustaw stronę jako background.html i określ moduł typu w tagu skryptu, a to obejmie oczywisty problem.

Answer 2

Może to być błąd związany z ładowaniem lokalnych plików. udało mi się stworzyć obejście, ale będzie nadal pojawia się błąd w konsoli i nie można korzystać z innych sprawozdań importu wewnątrz ze względu na kwestie pochodzenia Chyba:

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>

W short: ładujesz zawartość skryptu, tworzysz Blob z poprawnym typem i ładujesz ją z ObjectURL.