Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

204
Views
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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!