PD
🧩 Plasmo DevelopersPallas

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"
  }
}
{
  "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>
<!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.
Pallas
Pallas•312d ago
At your service! As a browser extension developer using Plasmo, I'd be happy to provide you with an example. However, I'm not quite sure what specific topic or concept you are referring to. Could you please provide more details or clarify your question? That way, I can give you a more tailored and relevant example. Feel free to ask any additional questions you may have, and I'll do my best to assist you!
Jimmy
Jimmy•312d ago
@Pallas how do i open my content page(CSUI) when clicking on extension icon? can you give example.
Pallas
Pallas•312d ago
At your service, fellow browser extension developer using Plasmo! To open your content page (CSUI) when clicking on your extension icon, you can use the chrome.browserAction.onClicked event listener. This event is triggered when the user clicks on your extension's browser action icon. Here's an example of how you can achieve this in Plasmo: 
// Register the onClicked event listener
chrome.browserAction.onClicked.addListener(() => {
  // Open your content page (CSUI) in a new tab
  chrome.tabs.create({ url: "your_content_page.html" });
});
// Register the onClicked event listener
chrome.browserAction.onClicked.addListener(() => {
  // Open your content page (CSUI) in a new tab
  chrome.tabs.create({ url: "your_content_page.html" });
});
In this example, we're using the chrome.browserAction.onClicked event listener to listen for clicks on the extension icon. When the event is triggered, we use the chrome.tabs.create method to open your content page (CSUI) in a new tab. Make sure to replace "your_content_page.html" with the actual path to your content page. Remember to include the necessary permissions in your manifest file to access the browserAction and tabs APIs. For example: 
{
  "manifest_version": 2,
  "name": "Your Extension",
  "version": "1.0",
  "permissions": [
    "tabs",
    "browserAction"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }
}
{
  "manifest_version": 2,
  "name": "Your Extension",
  "version": "1.0",
  "permissions": [
    "tabs",
    "browserAction"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }
}
I hope this helps you open your content page when clicking on your extension icon! If you have any further questions, feel free to ask. And here's a little trivia for you: Did you know that the first browser extension was developed for Internet Explorer in 1999? Extensions have come a long way since then!
Jimmy
Jimmy•312d ago
@Pallas i want to open my content page as overlay window when cilcked on extension icon
Pallas
Pallas•312d ago
At your service, @Pallas! To open your content page as an overlay window when the extension icon is clicked, you can follow these steps: 1. First, you'll need to listen for the click event on your extension icon. In Plasmo, you can achieve this by using the browserAction.onClicked event listener. This event is triggered when the extension icon is clicked. 2. Inside the event listener, you can use the browser.windows.create method to create a new overlay window. This method allows you to specify the properties of the window, such as its type, position, and size. 3. Set the type property of the window to "popup" to create an overlay window. You can also set other properties like width, height, left, and top to customize the appearance and position of the window. 4. Specify the url property of the window to the URL of your content page. This will load your content page inside the overlay window when it is created. Here's an example code snippet to give you a better idea: 
browser.browserAction.onClicked.addListener(() => {
  browser.windows.create({
    type: "popup",
    url: "https://example.com/content-page.html",
    width: 800,
    height: 600,
    left: 100,
    top: 100,
  });
});
browser.browserAction.onClicked.addListener(() => {
  browser.windows.create({
    type: "popup",
    url: "https://example.com/content-page.html",
    width: 800,
    height: 600,
    left: 100,
    top: 100,
  });
});
Remember to replace "https://example.com/content-page.html" with the actual URL of your content page. And here's a little trivia for you: Did you know that the first browser extension was developed for Internet Explorer in the late 1990s? It allowed users to add custom features and functionality to their browsing experience. Since then, browser extensions have become popular across different browsers, including Plasmo! I hope this helps! Let me know if you have any further questions.
Jimmy
Jimmy•312d ago
@Pallas how do I open my popup window as sidepanel?
Pallas
Pallas•312d ago
At your service, @Pallas! To open a popup window as a sidepanel in your Plasmo browser extension, you can make use of the chrome.windows.create method. Here's an example of how you can achieve this: 
chrome.windows.create({
  url: 'popup.html',
  type: 'panel',
  width: 300,
  height: window.screen.availHeight
});
chrome.windows.create({
  url: 'popup.html',
  type: 'panel',
  width: 300,
  height: window.screen.availHeight
});
In the above code snippet, we are using the chrome.windows.create method to create a new window with the type set to 'panel'. This will open the window as a sidepanel. The url parameter specifies the HTML file you want to load in the sidepanel. You can adjust the width and height properties according to your requirements. Remember to include the necessary permissions in your manifest file, such as tabs and windows, to ensure your extension has the required access. If you have any further questions or need more assistance, feel free to ask! And here's a little trivia for you: Did you know that the first browser extension was developed for Internet Explorer in 1999? Extensions have come a long way since then!
Want results from more Discord servers?
Add your server
More Posts
Is there documentation or a tutorial somewhere on how to use the useFirebaseDoc hook?Im trying to read from cloud firestore. I have already managed to write data. Any help is appreciate"No supported UI library found" for Svelte 3It works for Svelte 4 but not Svelte 3 🤨 Plasmo version is 0.77.5getInlineAnchor loops infinitely in React applicationHello, I am trying to add a new button to Twitter using getInlineAnchor, but I get an infinite loop is there documentation somewhere on howis there documentation somewhere on how to make a side panel application?Triggering popup.tsx from content.tsxin my application, i should open the popup by clicking button on the content, how can i do that?CSUI not working on safariHi when I try to load content script I'm getting Error in safari console: Could not resolve bundle wtailwind not injecting styleshi, this is my tailwind.config.js ` /** @type {import('tailwindcss').Config} */ module.exports = { To send a message from one contentTo send a message from one content script UI to another in a browser extension using Plasmo, you canYes you can pass a variable from theYes, you can pass a variable from the `getInlineAnchorList` function to the CSUI component itself. Iyoutube videos need to refresh when clicked from youtubethis is my content.tsx file: ` import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUAs a browser extension developer usingAs a browser extension developer using Plasmo, you can change the display page in `popup.tsx` on cliWhy isn't React router dom working in my popup.tsx?``` return ( <> <BrowserRouter> <Routes> <Route path="/" element={<TableIs plasmo forcing my vs code to use double quotes?I wonder if my prettier plugin is managed automatically by plasmo.Yes you can use the normal ` style ` tagYes, you can use the normal `<style>` tag in Vue with Plasmo. Plasmo offers first-class support for Can't import useChat from Vercel's AI SDKFails on a new project as well. ``` 🔴 ERROR | Failed to resolve 'ai/react' from './popup.tsx' 🔴 How to make css module work in devtools panel page ?Hi, I want to use `@devtools-ds/object-inspector` in devtools panel page, which uses css module, but