Intenté crear mi extensión de Chrome y me encontré con el problema de cómo pegar contenido en las páginas de fondo abiertas desde una ventana emergente. Mi arquitectura ahora es así:

Manifiesto:

 { "name": "extension", "description": "description", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "index.html", "default_title": "Open extension" }, "icons": { "16": "logo192.png", "48": "logo192.png", "128": "logo192.png" }, "permissions": ["storage", "activeTab", "tabs"] }

índice.tsx

 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') )

Aplicación.tsx

 const { ROUTE_START, ROUTE_LOGIN, ROUTE_BACKGROUND } = appRoutes export default function AppRouter(): JSX.Element { return ( <MemoryRouter> <Routes> <Route element={<WelcomeExt />} path={ROUTE_START} /> <Route element={<LoginExtensionPage />} path={ROUTE_LOGIN} /> <Route element={<LoginExtensionPage />} path={ROUTE_BACKGROUND} /> </Routes> </MemoryRouter> ) }

Bienvenido.tsx

 export default function WelcomeExt(): JSX.Element { const handleClick = () => { chrome.tabs.create({ url: 'background.html', }) } return ( <ExtensionHOC alignItems="center"> <img src={logo} alt="logo" style={{ width: '60px', marginTop: '104px' }} /> <Typography variant="h1" style={{ margin: '32px 0 8px', fontSize: '32px', fontWeight: '700', letterSpacing: '-0.5px', lineHeight: '38px', }} > Title </Typography> <Typography variant="subtitle1" style={{ color: '#04121D', letterSpacing: '-0.25px', }} > text secondary </Typography> <Button variant="contained" sx={{ marginTop: '28px', minWidth: '137px' }} onClick={handleClick}> Get started </Button> </ExtensionHOC> ) }

Tratando de encontrar documentos sobre este problema, pero nada de lo que he encontrado me responde a esta pregunta. Necesito información sobre la gestión de páginas que no sean index.html o necesito especificar otra arquitectura de enrutamiento, ejecución de scripts, etc.