'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