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, but you can link to them as well.

Use Cases

• A page to show when a user first installs your extension.
• A dedicated page for authentication
• When you need a more elaborate routing setup

Examples

• with-tabs (opens in a new tab)
• rfc-182 (opens in a new tab)

Usage

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. Export 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