• Browser Extension SDK
  • Tab Pages

Tab Pages

Tab Pages is a feature unique to the Plasmo framework. Unlike Extension Pages, Tab Pages are just regular web pages shipped with your extension bundle. Extensions generally redirect to or open these pages programmatically from extension pages. Use tab pages when you want to have a more elaborate routing setup, or a dedicated page for authentication.

To add a tab:

  1. Create a tabs folder in the source directory (project root or src)
  2. Add a .tsx file such as delta-flyer.tsx
  3. Exporting a default React component:
function DeltaFlyerPage() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <h2>Delta Flyer Tab</h2>
 
      <p>This tab is only available on the Delta Flyer page.</p>
    </div>
  )
}
 
export default DeltaFlyerPage

Your tab page will be available under the /tabs path in the extension bundle. It will be accessible from the browser under the URL:

chrome-extension://<extension-id>/tabs/delta-flyer.html

tab-pages

See rfc-182 for more details.

Last updated on December 2, 2022