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

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:

import type { PlasmoGetRootContainer } from "plasmo";

export const getRootContainer: PlasmoGetRootContainer = () => {
  const iframe = document.createElement("iframe");
  iframe.src = "your-csui-page.html";
  return iframe;
};


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:

import { PlasmoConfig } from "plasmo";
import { getRootContainer } from "./your-root-container-file";

const config: PlasmoConfig = {
  // Other configuration options...
  getRootContainer,
};

export default config;


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.
Was this page helpful?