Trying to create my Chrome extension and faced with problem how to paste content in background pages opened from popup. My architecture is now like that:
Manifest:
{
"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"]
}
index.tsx
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
App.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>
)
}
Welcome.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>
)
}
Trying to find docs about this issue but nothing I have found answers me on this question. Need information about managing other than index.html pages or I need to specify another routing architecture, script execution etc.