To mount your content page CSUI inside
To mount your content page (CSUI) inside an iframe instead of a shadow DOM using
getRootContainer, you can follow these steps:
1. Export a getRootContainer function in your Plasmo extension code. This function will be responsible for returning the root container element where your CSUI will be mounted. Here's an example:
In this example, we create an iframe element and set its src attribute to the URL of your CSUI page. You can replace "your-csui-page.html" with the actual URL of your CSUI page.
2. Update your Plasmo configuration to use the getRootContainer function. In your Plasmo configuration file, import the getRootContainer function and assign it to the getRootContainer property. Here's an example:
Make sure to replace "./your-root-container-file" with the actual path to your root container file.
3. Build and run your Plasmo extension. When your extension is loaded, the getRootContainer function will be called, and the CSUI will be mounted inside the iframe returned by the function.
By using the getRootContainer function and returning an iframe element, you can mount your CSUI inside an iframe instead of a shadow DOM. This can be useful in scenarios where you need more control over the styling or behavior of your CSUI, or if you want to isolate it from the web page's DOM.6 Replies
Where do I find the actual path to "your-csui-page.html"?
!question Where do I find the actual path to "your-csui-page.html"?
As a browser extension developer using Plasmo, you can find the actual path to "your-csui-page.html" in your Plasmo project by following these steps:
1. Open your Plasmo project in your code editor.
2. Navigate to the directory where your extension's code is located.
3. Look for a directory called "pages" or "ext-pages". This is where Plasmo stores the HTML files for your custom extension pages.
4. Inside the "pages" or "ext-pages" directory, locate the file named "your-csui-page.html". This is the HTML file for your custom page.
5. The path to "your-csui-page.html" is relative to the root directory of your Plasmo project. For example, if "your-csui-page.html" is located in a subdirectory called "subfolder", the path would be "subfolder/your-csui-page.html".
It's important to note that the actual path to "your-csui-page.html" may vary depending on your project's file structure and configuration. Make sure to check your project's directory structure and adjust the path accordingly.
Additionally, if you have configured a different directory for your custom pages in your Plasmo project, you will need to locate the corresponding directory and find "your-csui-page.html" within that directory.
By following these steps, you should be able to find the actual path to "your-csui-page.html" in your Plasmo project and use it in your browser extension development.
Hey guys, please am still having a hard time understanding it here I dont see the pages folder in my build. It would really help if @Pallas help with a demo project that loads the iframe if its not too much please
Hey there! I'd be happy to help you with your demo project and understanding how to use the iframe.
First, let's address the issue of not seeing the "pages" folder in your build. The presence of a "pages" folder in your build can depend on the specific project structure and build configuration you are using. In some setups, the "pages" folder may not be present by default.
To load an iframe in your demo project, you can follow these steps:
1. Create an HTML file where you want to load the iframe. Let's call it "index.html" for this example.
2. In the "index.html" file, add the following code to create the iframe element:
Replace "https://www.example.com" with the URL of the website you want to load in the iframe.
3. Customize the iframe by adding attributes and styles as needed. For example, you can set the width and height of the iframe using the "width" and "height" attributes.
4. Save the "index.html" file and open it in your browser. You should see the website loaded within the iframe.
Remember to adjust the iframe's dimensions and other properties to fit your specific needs.
I hope this helps you get started with loading an iframe in your demo project! If you have any further questions or need additional assistance, feel free to ask. Happy coding!
Oh, and here's a little trivia for you: Did you know that the concept of iframes was introduced in HTML 4.0 back in 1997? It has been a useful tool for embedding content from other sources ever since!
That worked
But i really need a plasmo demo project explaining how to load the content in an iframe
@Joshua Perk Were you able to get it to work yet?
@paulemas has reached level 2. GG!