Chromeバージョン61の拡張機能のES6モジュール

Question

ES6 Modules In Google Chrome Extension Development (unexpected token)と同じ質問ではありません。

Googleは、ChromeがES6モジュールをサポートしていると主張するニュースリリースを作成しました。拡張モジュール内からモジュールをロードしようとしています。私は普通のページの中からモジュールをロードすることはできますが、エクステンションの中からはロードできません。ここで

はhtmlです、これは、拡張コンテキスト内のページです：

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

私はページを開いたとき、私はコンソールに次のエラーメッセージを参照してください。

はロードに失敗しましたモジュールスクリプト：サーバーは非JavaScriptのMIMEタイプ ""で応答しました。厳密なMIMEタイプチェックは、HTML仕様ごとのモジュールスクリプトに対して強制されます。

誰にもアドバイスはありますか？これはChromeに報告するバグですか？それともまだサポートされていないのですか？私は簡単な説明を見つけることができませんでした。

Answer 1

コメントでユーザーwOxxOmが記載されているため、https://crbug.com/738739を参照してください。

9-18-17更新：https://bugs.chromium.org/p/chromium/issues/detail?id=769012は修正されているようです。

10-19-17更新：クロム64で作業として報告https://bugs.chromium.org/p/chromium/issues/detail?id=728377#c18（現在カナリア）

11-13-17更新：最終更新、クロム63でテスト、モジュールが現在取り組んでいます。拡張モジュールのバックグラウンドページにモジュールをロードする必要がある場合は、manifest.jsonのscriptsプロパティを使用してページをbackground.htmlに設定し、scriptタグにtypeモジュールを指定することはできません。マニフェストの問題。

Answer 2

ローカルファイルの読み込み中にバグが発生する可能性があります。 私はそのための回避策を作成するために管理していますが、まだコンソールでエラーが発生しますし、あなたは私が推測するの起源の問題に起因する内の他のimportステートメントを使用することはできませんで

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からロードします。