Chrome extension: Using @mui v5 in content-script with `"run_at": "document_start"` gives error in @emotion library about material-ui HOT 6 CLOSED

In my case, I am running a content script on a Zoom invitation page. This page, weirdly, doesn't trigger the event DOMContentLoaded. There may be more pages like this.

What I did to load react was to wait, specifically, for a div (that I know will exist), by using a mutation observer, and then load the react.

from material-ui.

Worked fine for me. I used npx create-chrome-ext to quickly prototype a chrome extension. This was my content script code -

import { createRoot } from 'react-dom/client'
import Typography from '@mui/material/Typography'

const appRoot = document.createElement('div')
appRoot.id = 'ext-root'

document.getElementById('zoom-ui-frame')?.prepend(appRoot)

createRoot(appRoot).render(<Typography variant="h2">Hello From extension</Typography>)

And this is what got added

Let me know if you can share the minimal zip file for your extension that I can use to debug.

from material-ui.

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

from material-ui.

@brijeshb42 Do you have the "run_at": "document_start" in the content-script section of the manifest?

from material-ui.

I checked again with what you said ^. It worked with this as well. I just had to wrap the main code in a DOMContentLoaded event handler since the dom nodes are not ready at document_start.

import { createRoot } from 'react-dom/client'
import Typography from '@mui/material/Typography'

console.log('Hello extensions')

document.addEventListener('DOMContentLoaded', () => {
  const appRoot = document.createElement('div')
  appRoot.id = 'ext-root'

  document.getElementById('zoom-ui-frame')?.prepend(appRoot)

  createRoot(appRoot).render(<Typography variant="h2">Hello From extension</Typography>)
})

from material-ui.

But I still get the error in @mui / emotion, this was my original logic.

from material-ui.