🧩 Plasmo Developers•17mo ago

Create CSUI root containers programmatically

I've read the page about the life cycle of Plasmo CSUI but I'm still not sure how I could create root containers (and render a component inside it) programmatically rather than declaratively. For my extension I want to append inline CSUI to certain DOM elements, but these are sometimes removed from the DOM and added again at certain circumstances. I'm getting messages from my BGSW which should trigger a search for a list of these target anchors, followed by rendering new CSUI where necessary. Is something like that possible?

3 Replies

lab•17mo ago

You can simply make a .ts file, and manually import react/react-dom and do your bidding as needed Only .tsx files are treated as CSUI, so .ts file can import a .tsx file and you can do your custom mounting as needed - note that .ts CS will not receive any CSUI related runtime hook such as getStyles etc..., you will just need to DIY them all

simonmon8692OP•17mo ago

Thanks for the quick help. I managed to do what I wanted with your tip. For anyone who is interested how I did it:

// MyComponent.tsx
function MyComponent(props: MyProps) {
  return(<div>...</div>)
}
export default MyComponent

// MyComponent.tsx
function MyComponent(props: MyProps) {
  return(<div>...</div>)
}
export default MyComponent

// content.ts
import React from "react"
import { createRoot } from "react-dom/client"
...
// first creation of component
const container = document.createElement("div")
anchorInDom.prepend(container)
const root = createRoot(container)
root.render(React.createElement(MyComponent, props))
...
// update component
root.render(React.createElement(MyComponent, otherProps))

// content.ts
import React from "react"
import { createRoot } from "react-dom/client"
...
// first creation of component
const container = document.createElement("div")
anchorInDom.prepend(container)
const root = createRoot(container)
root.render(React.createElement(MyComponent, props))
...
// update component
root.render(React.createElement(MyComponent, otherProps))

YAGPDB.xyz•17mo ago

Gave +1 Rep to @louisgv

Gaming

Programming

Create CSUI root containers programmatically