Estoy desarrollando una extensión de Chrome usando webpack y babel.
Tengo este popup.js:
import 'regenerator-runtime/runtime' // This is required in every JS files that has an async-await function!! const { NEW_MAPPING_BUTTON } = require('./constants/mapping-page-elements') const gen_traffic = document.querySelector('.gen-traffic') gen_traffic.addEventListener('click', async (e) => { let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: getPageData, }); }) const getPageData = () => { console.log('okk?') console.log( NEW_MAPPING_BUTTON ) }mapeo-página-elementos.js:
exports.NEW_MAPPING_BUTTON = () => { return document.querySelector("app-mappings") }paquete web.common.js:
const path = require("path"); const ESLintPlugin = require("eslint-webpack-plugin"); module.exports = { entry: ["regenerator-runtime/runtime.js", "./src/popup.js"], module: { rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: ["babel-loader"], }, ], noParse: /(mapbox-gl)\.js$/ }, resolve: { extensions: ["*", ".js"], }, output: { path: path.resolve(__dirname, "./dist"), filename: "bundle.js", }, devServer: { static: path.resolve(__dirname, "./dist"), }, plugins: [new ESLintPlugin()], };Por alguna razón, cada vez que uso el "NEW_MAPPING_BUTTON" en el archivo popup.js, aparece el error "no está definido". Probé el mismo elemento que exporté localmente en popup.js y devolvió el elemento correctamente, así que creo que este es un problema con el sistema de exportación de webpack. Gracias por adelantado.
Dado que la función se ejecuta en el contexto de la página, su contexto original se pierde como se explica en los documentos de extensión de Chrome :
Esta función se ejecutará en el contexto del objetivo de inyección. Sin embargo, esto no transferirá ninguno de los contextos de ejecución actuales de la función. Como tal, los parámetros vinculados (incluido este objeto) y las variables con referencia externa generarán errores.
Para empezar, fallará la referencia a variables desde fuera de la definición de la función, incluidas las importaciones.
A medida que Webpack (o Babel/Typescript) agrupan y transpilan su archivo, algunas características del idioma se reemplazan por polyfills. En mi caso, una error instanceof Error de Comprobación de errores se transfirió a _instanceof(error,Error) o algo por el estilo, donde _instanceof es una función personalizada definida en el archivo. En consecuencia, estas funciones personalizadas no estarán disponibles cuando finalmente se ejecute la función. Esto exacerba el problema descrito anteriormente.
Cree un nuevo archivo en su lugar con el contenido de la función, con un punto de entrada/paquete de paquete web coincidente. Luego puede usar el argumento de files de chrome.scripting.executeScript :
const tabs = await chrome.tabs.query({ active: true, currentWindow: true }) const tabId = tabs[0].id chrome.scripting.executeScript( { target: {tabId: tabId}, files: ['getPageData.js'], }Ventajas:
Contras:
Puede inyectar un script de otras formas además de chrome.scripting como se explica aquí . La respuesta también tiene algunos enlaces que explican cómo puede configurar una comunicación bidireccional con el script inyectado.