'Chrome extension React interact with background pages (V3)
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
