8 replies

To mount your content page CSUI inside

To mount your content page (CSUI) inside an iframe instead of a shadow DOM using

getRootContainer

getRootContainer

, you can follow these steps:

1. Export a

getRootContainer

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;
};

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

iframe

element and set its

src

src

attribute to the URL of your CSUI page. You can replace

"your-csui-page.html"

"your-csui-page.html"

with the actual URL of your CSUI page.

2. Update your Plasmo configuration to use the

getRootContainer

getRootContainer

function. In your Plasmo configuration file, import the

getRootContainer

getRootContainer

function and assign it to the

getRootContainer

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;

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"

"./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

getRootContainer

function will be called, and the CSUI will be mounted inside the iframe returned by the function.

By using the

getRootContainer

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.

�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

getRootContainer

, you can follow these steps:

1. Export a

getRootContainer

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;
};

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

iframe

element and set its

src

src

attribute to the URL of your CSUI page. You can replace

"your-csui-page.html"

"your-csui-page.html"

with the actual URL of your CSUI page.

2. Update your Plasmo configuration to use the

getRootContainer

getRootContainer

function. In your Plasmo configuration file, import the

getRootContainer

getRootContainer

function and assign it to the

getRootContainer

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;

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"

"./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

getRootContainer

function will be called, and the CSUI will be mounted inside the iframe returned by the function.

By using the

getRootContainer

getRootContainer

To mount your content page CSUI inside

Similar Threads

To mount your content page CSUI inside

Similar Threads

Similar Threads

Similar Threads