[Q/A] How to append_child using contents_script Custom Root Container

[czqgithub2017]

What happened?

I want to add a child element under the ”nav“ element once the nav sub elements have fully loaded. However, my current code is replacing all the existing children under the "nav".

the html:
"
_

aaa

bbb

_ "

script:
**export const getRootContainer = () =>
new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainer = document.querySelector("nav")
if (rootContainer) {
clearInterval(checkInterval)
resolve(rootContainer)
}
}, 137)
})

const PlasmoOverlay = () => {
return (

<span
style={{
background: "yellow",
padding: 12
}}>
HELLO WORLD ROOT CONTAINER

) }

export const render = async ({ createRootContainer }) => {
const rootContainer = await createRootContainer()
const root = createRoot(rootContainer)
root.render()
}

export default PlasmoOverlay**

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

This is the case because you're watching over the entire nav with const rootContainer = document.querySelector("nav")

You can tweak that query to watch for a sub element

[BWBama85]

What happened?

I want to add a child element under the ”nav“ element once the nav sub elements have fully loaded. However, my current code is replacing all the existing children under the "nav".

the html: " _

aaa
bbb
_ "
script: **export const getRootContainer = () => new Promise((resolve) => { const checkInterval = setInterval(() => { const rootContainer = document.querySelector("nav") if (rootContainer) { clearInterval(checkInterval) resolve(rootContainer) } }, 137) })

const PlasmoOverlay = () => { return (

<span
style={{
background: "yellow",
padding: 12
}}>
HELLO WORLD ROOT CONTAINER
) }
export const render = async ({ createRootContainer }) => { const rootContainer = await createRootContainer() const root = createRoot(rootContainer) root.render() }

export default PlasmoOverlay**

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

You can also create a new element inside your selector like so:

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