Injecting content without ShadowDOM

[rhalaly]

Plasmo is cool in general but WAY too complex to make custom things. I want to inject code into a website and keep the original website style.

With ShadowDOM:

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://example.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(
    "#app > div > div > div"
  )

function ContentScript() {
  return <button>Hi</button>
}

export default ContentScript

Without ShadowDOM:

import { Button } from "@fluentui/react-components"
import type { PlasmoCSConfig, PlasmoRender } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://example.com/*"]
}

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const rootContainerParent = document.querySelector(
        "#app > div > div > div"
      )
      if (rootContainerParent) {
        clearInterval(checkInterval)
        const rootContainer = document.createElement("div")
        rootContainerParent.appendChild(rootContainer)
        resolve(rootContainer)
      }
    }, 137)
  })

export const render: PlasmoRender<any> = async ({
  anchor, // the observed anchor, OR document.body.
  createRootContainer // This creates the default root container
}) => {
  const rootContainer = await createRootContainer()

  const root = // HOW TO CREATE THAT ROOT????
  root.render(
      <ContentScript/>
  )
}

function ContentScript() {
  return <button>Hi</button>
}

export default ContentScript

This became a way larger code, that, IMHO, unjustified. Plus the fact that I need a custom render, because I don't want overlay, and it uses it as default, and I don't know how to create the root element, since there is no documentation for that.

Why not make the RootContainer customization more friendly? For example, I would like to see something like:

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://example.com/*"]
}

export const RootContainerElement = () => document.createElement('div`);

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(
    "#app > div > div > div"
  )

function ContentScript() {
  return <button>Hi</button>
}

export default ContentScript

What we need more than this? :)