Browser Extension Pages
Extension pages are built-in pages recognized by the browser. They include the extension's popup, options, sidepanel and newtab pages.
Heads up! Make sure to refresh your extension manually when creating a newbrowser extension page as our runtime might not be listening and might notupdate in certain cases.
Adding a Popup Page
The popup page is a small dialog window that opens when a user clicks on the extension's icon in the browser toolbar. It is the most common type of extension page.
Create apopup.tsx file or apopup/index.tsx file that exports a default React component. With that, your popup is ready to be used 🚀!
Seewith-popup (opens in a new tab)
Adding the Options Page
The options page is meant to be a dedicated place for the extension's settings and configuration.
Create either anoptions.tsx oroptions/index.tsx file to render the options_ui 👌
Seewith-options (opens in a new tab)
Adding a New Tab Page
The New Tab page overrides the default tab and is generally how the browser greets the user.
Create anewtab.tsx file or anewtab/index.tsx file, and Plasmo will take care of the rest to render your new tab page 🤘!
Seewith-newtab (opens in a new tab)
Adding a Side Panel
The Side Panel allows extensions to display their own UI in the side panel, enabling persistent experiences that complement the user's browsing journey.
Create asidepanel.tsx file or asidepanel/index.tsx file, and Plasmo will take care of the rest to render the UI in the Side Panel.
Seewith-sidepanel (opens in a new tab)
Adding a Dev Tools Page
The Dev Tools page is a dedicated page that opens when a user opens the Dev Tools for the extension.
Create adevtools.tsx file or adevtools/index.tsx file, and Plasmo will take care of the rest!