Multiple root containers question

I have a content script inserts a new root container in a website.:

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const desktopContainerParent = document.querySelector(
        "div.desktopOnly span.topBarDetails span.delegatesShortcut.clickable"
      )
      if (desktopContainerParent) {
        clearInterval(checkInterval)
        const desktopRootContainer = document.createElement("span")
        desktopContainerParent.after(desktopRootContainer)
        resolve(desktopRootContainer)
      }
    }, 137)
  })

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({ createRootContainer }) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<OilOverlay />)
}

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const desktopContainerParent = document.querySelector(
        "div.desktopOnly span.topBarDetails span.delegatesShortcut.clickable"
      )
      if (desktopContainerParent) {
        clearInterval(checkInterval)
        const desktopRootContainer = document.createElement("span")
        desktopContainerParent.after(desktopRootContainer)
        resolve(desktopRootContainer)
      }
    }, 137)
  })

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({ createRootContainer }) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<OilOverlay />)
}

I would like to add a new root container so that I can attach OilOverlay to it as well.

div.mobileOnly span.topBarDetails span.delegatesShortcut.clickable

div.mobileOnly span.topBarDetails span.delegatesShortcut.clickable

Right now the only one that works is the Desktop one. Replicating the code in a new content script and searching for the mobile class instead of desktop does not work. What am I missing here?

5 Replies

Arcane•2y ago

@bwbama85 has reached level 1. GG!

lab•2y ago

Right now the only one that works is the Desktop one. Replicating the code in a new content script and searching for the mobile class instead of desktop does not work.

Does the mobile thing always exist? I would log out the element that was querried and check. in that query function, try using a querySelectorAll and debug it out also might be beneficial to bump the timer to make it easier to see what's going on

bwbama85OP•2y ago

Hi Louis, Yes mobileOnly always exist. Its a rather old code style that has both mobile and desktop styles always on the page. I will do a bit more debugging and see if I can figure it out. Was just making sure I wasn't making an error in how I was setting two root containers or something like that.

lab•2y ago

Note that when setting your own root container, you will need to handle how they should be rendered. The default renderer only render once for each root container. If you're returning 2 elements, you will need iterate through them to render the 2 items as needed. It's a bit weird that a 2nd content script wasn't able to see and render elements tho... these CS are separated in context. I'd console log the selector on each script to ensure there's no conflicting logic

bwbama85OP•2y ago

This is the second content script:

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const mobileContainerParent = document.querySelector(
        "div.mobileOnly span.topBarDetails span.delegatesShortcut.clickable"
      )
      if (mobileContainerParent) {
        clearInterval(checkInterval)
        const mobileContainerParent = document.createElement("span")
        mobileContainerParent.after(mobileContainerParent)
        resolve(mobileContainerParent)
      }
    }, 137)
  })

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({ createRootContainer }) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<OilOverlay />)
}

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const mobileContainerParent = document.querySelector(
        "div.mobileOnly span.topBarDetails span.delegatesShortcut.clickable"
      )
      if (mobileContainerParent) {
        clearInterval(checkInterval)
        const mobileContainerParent = document.createElement("span")
        mobileContainerParent.after(mobileContainerParent)
        resolve(mobileContainerParent)
      }
    }, 137)
  })

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({ createRootContainer }) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<OilOverlay />)
}

oilPriceDesktop.tsx and oilPriceMobile.tsx inside contents folder I'll eventually combine them into one but was separating them to ease debugging at first only to find the mobile one did not work at all. Thanks for the guidance so far. Will keep chipping away and see what I can come up with

Gaming

Programming

Multiple root containers question