Chakra UI Plasmo Content Script

content.ts

import { Button, ChakraProvider, Flex } from "@chakra-ui/react";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import type { PlasmoContentScript } from "plasmo";
import { createRoot } from "react-dom/client";

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

const selector = "table"

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const element = document.querySelector(
        selector
      )?.parentNode
      if (element) {
        const rootContainer = document.createElement("td")
        element.insertBefore(
          rootContainer,
          document.querySelector(replySubmitRowLastItemSelector)
        )
        clearInterval(checkInterval)
        resolve(rootContainer)
      }
    }, 137)
  })

const PlasmoInline = () => {
  return (
    <div />
  )
}

export const render = async ({ createRootContainer }) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  const myCache = createCache({
    container: rootContainer,
    key: "c"
  })
  root.render(
    <CacheProvider value={myCache}>
      <ChakraProvider>
        <PlasmoInline />
      </ChakraProvider>
    </CacheProvider>
  )
}

export default PlasmoInline