🧩 Plasmo Developers�PD
🧩 Plasmo Developers•3y ago•
6 replies
Pallas

To open your content page CSUI when

To open your content page (CSUI) when clicking on the extension icon in Plasmo, you need to create 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.

Here are the steps to achieve this:

1. Create a popup.tsx file or a popup/index.tsx file in your project. This file should export a default React component that represents the content of your popup page. You can use this component to build your CSUI.
2. In the popup.tsx file, you can use Plasmo's UI components and styling to create your CSUI. You can also import any necessary dependencies or custom stylesheets.
3. Once you have created your popup component, Plasmo will automatically handle rendering it into the popup page when the user clicks on the extension icon.
4. To ensure that your popup page is opened when the extension icon is clicked, you need to configure the 
manifest.json
 file. Add the following code to the 
manifest.json
 file:

{
  "browser_action": {
    "default_popup": "popup/index.html"
  }
}


This code specifies that the popup/index.html file should be used as the default popup page when the extension icon is clicked.

5. If you have a popup/index.tsx file, create a popup/index.html file with content similar to the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Popup</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>


Note that you do not need to include the root element or the script tag in the popup/index.html file. The Plasmo Framework will handle that for you.

6. Finally, build and run your extension. When you click on the extension icon, your CSUI will be displayed in the popup window.

By following these steps, you can open your content page (CSUI) when clicking on the extension icon in Plasmo.
Was this page helpful?