Estoy creando una extensión de Chrome, que usa react/webpack, y necesita inyectar código en una página existente. Así que necesito cargar uno de mis archivos javascript cuando se procesa el componente.

Sin embargo, no puedo acceder a las propiedades en ese archivo javascript. Recibo el error ' No se pueden leer las propiedades de undefined (leyendo 'valor inicial') '. Le he otorgado al archivo manifest.json todos los permisos adecuados y sé que el archivo de script se está cargando correctamente. ¿Qué estoy haciendo mal?

plugin.bundle.js (archivo javascript que estoy tratando de cargar)

 var plugin = plugin || {}; SetupPlugin(); function SetupPlugin() { plugin.initialvalue = plugin.initialvalue || 123; }

índice.jsx

 import { render } from 'react-dom'; import Embedtab from './Embedtab'; render(<Embedtab />, window.document.body.querySelector('.someclass'));

Embedtab.tsx

 declare global { interface Window { plugin: any; } } export class Embedtab extends React.Component<any> { componentDidMount() { const script = document.createElement("script"); script.src = chrome.runtime.getURL("./../plugin.bundle.js"); script.async = false; script.onload = () => this.scriptLoaded(); document.body.appendChild(script); } scriptLoaded() { alert("embedded loaded, value is " + window.plugin.initialvalue); //errors here } render() { return ( <div className="App"> <header className="App-header"> Hello World </header> </div> ); } }; export default Embedtab;