Estoy trabajando en una extensión del navegador que ejecuta un script en segundo plano. Hasta ahora tengo todo eso funcionando. Mi problema es que necesito usar un módulo en mi script de fondo. Cuando escribo la declaración de importación, obtengo la siguiente excepción:
Uncaught SyntaxError: import declarations may only appear at top level of a module¿Cómo se convierte un script de fondo en un módulo?
Manifiesto.json
{ "name": "Extension Demo", "version": "1.0", "description": "Build an Basic Extension!", "permissions": [ "activeTab", "webRequest", "webRequestBlocking", "<all_urls>" ], "browser_action": { "default_popup": "index.html", "default_icon": { "16": "img/icon16.png", "32": "img/icon32.png", "48": "img/icon48.png" } }, "manifest_version": 2, "background": { "scripts": [ "background.js" ] } }bakground.js
import * as myMod from './myMod.js' function redirect(requestDetails) { //do some awesome stuff } browser.webRequest.onBeforeRequest.addListener( redirect, { urls: ["<all_urls>"], types: ["page"] }, ["blocking"] );Está utilizando el manifiesto V2, y le recomiendo que actualice a Manifest v3 a las funciones más recientes y a su corrección de errores.
En su archivo manifest.json , pase "type": "module" dentro del objeto para permitir las importaciones de ESM.
"background": { "service_worker": "background.js", "type": "module" }Alternativamente, en caso de que aún desee usar V2, use una importación dinámica en su lugar. Tenga en cuenta que esas devoluciones prometen y tendrá que esperarlas o usar una declaración .then().
(async () => { const myMod = await import("./myMod.js"); // if myMod.js uses an `export default` statement, use `(await import("./myMod.js")).default` instead. function redirect(requestDetails) { //do some awesome stuff } browser.webRequest.onBeforeRequest.addListener( redirect, { urls: ["<all_urls>"], types: ["page"] }, ["blocking"] ); })();