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
Usage
To add a tab:
- Create a
tabs
folder in the source directory (project root orsrc
) - Add a
.tsx
file such asdelta-flyer.tsx
- Export a default React component:
tabs/delta-flyer.tsx
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