Extension Pages

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 new browser extension page as our runtime might not be listening and might not update 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 a popup.tsx file or a popup/index.tsx file that exports a default React component. With that, your popup is ready to be used 🚀!

See with-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 an options.tsx or options/index.tsx file to render the options_ui 👌

See with-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 a newtab.tsx file or a newtab/index.tsx file, and Plasmo will take care of the rest to render your new tab page 🤘!

See with-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 a sidepanel.tsx file or a sidepanel/index.tsx file, and Plasmo will take care of the rest to render the UI in the Side Panel.

See with-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 a devtools.tsx file or a devtools/index.tsx file, and Plasmo will take care of the rest!

See with-devtools (opens in a new tab)