Cómo importar modules ES6 en el script de contenido para la extensión de Chrome

En Chrome 61 se agregó soporte para modules en JavaScript. En este momento estoy ejecutando Chrome 63.

Estoy tratando de descubrir cómo usar la syntax de import / export en el script de contenido de extensión de Chrome para usar modules.

En manifest.json :

"content_scripts": [{

"js": [ "content.js" ], 

En my-script.js en el mismo directory que content.js

 'use strict'; const injectFunction = () => window.alert('hello world'); export default injectFunction; 

En content.js

 'use strict'; import injectFunction from './my-script.js'; injectFunction(); 

Recibo este error: Untaught SyntaxError: identificador inesperado

Si cambio la syntax de import a la import {injectFunction} from './my-script.js'; Me sale este error: Uncaught SyntaxError: Inexpected token {

¿Hay algún problema con el uso de esta syntax en content.js en la extensión de Chrome ya que en HTML tienes que usar la syntax <script type="module" src="script.js"> , o estoy haciendo algo mal? Parece extraño que Google ignore el soporte para extensiones.

Logré encontrar una solución .

En primer lugar, es importante decir que los scripts de contenido no son compatibles con los modules a partir de enero de 2018. Pero puede hacerlo incorporando la label del script del module en la página que conduce a su extensión.

Esto está en mi manifiesto

 "content_scripts": [ { "js": [ "content.js" ] }], "web_accessible_resources": [ "main.js", "my-script.js" ] 

Tenga en count que tengo dos scripts en resources accesibles en la web.

Mi content.js contiene solo esta lógica:

 'use strict'; const script = document.createElement('script'); script.setAttribute("type", "module"); script.setAttribute("src", chrome.extension.getURL('main.js')); const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; head.insertBefore(script, head.lastChild); 

Esto insertá main.js en la página web como un script de module. Toda mi lógica comercial está ahora en main.js y main, así como todas las secuencias de commands que voy a importar tiene que estar en web_accessible_resources en el manifiesto.

Este es el contenido de ejemplo de my-script.js :

 'use strict'; const injectFunction = () => window.alert('hello world'); export {injectFunction}; 

Y en main.js este es un ejemplo de import del script:

 'use strict'; import {injectFunction} from './my-script.js'; injectFunction(); 

Esto funciona, no se producen errores y estoy feliz 🙂

Exportar el module como un object:

 'use strict'; const injectFunction = () => window.alert('hello world'); export {injectFunction}; 

Entonces puedes importar su propiedad:

 'use strict'; import {injectFunction} from './my-script.js';