6 replies

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

popup.tsx

file or a

popup/index.tsx

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

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

manifest.json

file. Add the following code to the

manifest.json

manifest.json

file:

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

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

This code specifies that the

popup/index.html

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

popup/index.tsx

file, create a

popup/index.html

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>

<!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

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.

�PD

🧩 Plasmo Developers•3y ago•

6 replies

Pallas

To open your content page CSUI when

popup.tsx

popup.tsx

file or a

popup/index.tsx

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

popup.tsx

manifest.json

manifest.json

file. Add the following code to the

manifest.json

manifest.json

file:

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

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

This code specifies that the

popup/index.html

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

popup/index.tsx

file, create a

popup/index.html

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>

<!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

popup/index.html

To open your content page CSUI when

Similar Threads

To open your content page CSUI when

Similar Threads

Similar Threads

Similar Threads