🧩 Plasmo Developers•2y ago

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.

7 Replies

PallasOP•2y 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•2y ago

@Pallas how do i open my content page(CSUI) when clicking on extension icon? can you give example.

PallasOP•2y 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•2y ago

@Pallas i want to open my content page as overlay window when cilcked on extension icon

PallasOP•2y 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•2y ago

@Pallas how do I open my popup window as sidepanel?

PallasOP•2y 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!

Gaming

Programming

To open your content page CSUI when