Estoy escribiendo una extensión de Chrome, que se supone que debe hacer una inyección DOM básica. Sin embargo, tengo dificultades para acceder a la página web desde la extensión, ya que el script de contenido no se activa. Tampoco hay una salida en la consola, ni se inyectan los datos.

manifiesto.json

 { "name": "[REDACTED]", "description": "[REDACTED]", "version": "1.0", "manifest_version": 3, "content_scripts" : [ { "matches": ["https://projects.[REDACTED].com/[REDACTED]"], "js": ["content_script.js"] } ], "background": { "service_worker": "service_worker.js" }, "permissions": ["storage"] }

principal.tsx

 import React from 'react'; import { createRoot } from 'react-dom/client'; import App from './App' debugger; // Inject Root const app = document.createElement('div') app.id = 'react-root' console.log("main"); alert("main"); debugger; document.body.appendChild(app); const container = document.getElementById('react-root'); export const root = createRoot(container!); root.render(<App />) debugger;

Aplicación.tsx

 import React, { useState, useEffect } from 'react' import Tasks from "./components/Tasks"; import "react-dom"; import { createRoot } from 'react-dom/client'; function useMutationObserver ( ref: any, callback: any, options = { attributes: true, characterData: true, childList: true, subtree: true, } ) { useEffect(() => { if (ref.current) { const observer = new MutationObserver(callback); observer.observe(ref.current, options); return () => observer.disconnect(); } }, [callback, options]); }; function App() { const [mutState, setMutState] = useState(false); function _injectElements() { document.getElementById("newtaskheading")!.innerHTML = "<div id='inject-here'></div>"; const root = createRoot(document.getElementById("inject-here")!); root.render(<Tasks></Tasks>) } useMutationObserver(document.getElementsByClassName("slideFormName")[0], () => { if (mutState == true) { setMutState(false); } else { setMutState(true); } }); return ( <h1>E</h1> ); } export default App