Chrome版本61中的扩展模块中的ES6模块

问题描述：

这与ES6 Modules In Google Chrome Extension Development (unexpected token)的问题并不相同，因为它既过时又已回答。Chrome版本61中的扩展模块中的ES6模块

谷歌制作了一则新闻稿，声称Chrome支持ES6模块。我正在尝试从扩展中加载模块。我能够从普通页面内加载模块，但不能从扩展内部加载模块。

下面是HTML，这是一个扩展上下文页：

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

当我打开网页，我在控制台看到以下错误信息：

无法加载模块脚本：服务器使用非JavaScript MIME类型的“”进行响应。每个HTML规范的模块脚本都会执行严格的MIME类型检查。

有没有人有任何建议？这是一个应该向Chrome报告的错误吗？或者它还没有被支持？我找不到任何直截了当的解释。

这是在Mac上。该文件是从扩展内部本地加载的。该URL类似于chrome：//extensionid/test/test.html – Josh

我认为它最终会成为chrome扩展的问题，它们可能需要关闭对本地资源的mime类型检查，并假定默认的MIME类型为脚本资源与一个有效的js之一。说我会想，现在还很早。 – MinusFour

尚未支持，请访问https://crbug.com/738739 – wOxxOm

答

作为用户wOxxOm在评论中提到，请参阅https://crbug.com/738739。

9-18-17更新：https://bugs.chromium.org/p/chromium/issues/detail?id=769012看起来像它正在修复！

17年10月19日更新：https://bugs.chromium.org/p/chromium/issues/detail?id=728377#c18报告为在铬64（目前金丝雀）

17年11月13日更新的工作：最后的更新，在铬63的测试，模块现在正在。请注意，如果您需要在扩展的后台页面中加载模块，则无法通过manifest.json中的scripts属性执行此操作，而是将页面设置为background.html，并在脚本标记中指定类型模块，并且将绕过明显的问题。

不幸的是有另一个错误报告在那里...无论如何这是有趣的，但让我认为es6模块将需要翻译至少一年的铬扩展：/ – YangombiUmpakati

答

这可能是一个加载本地文件的错误。我设法创建一个解决办法，但你还是会得到一个错误的控制台，您不能使用原产地问题内到期的其他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加载它。

Chrome版本61中的扩展模块中的ES6模块

相关推荐