Chrome extension: Using @mui v5 in content-script with "run_at": "document_start" gives error in @emotion library

[rickerp]

Steps to reproduce

Link to live example: (requires to build a chrome extension)
It's difficult to create a reproducible example for a chrome-extension, so I'll try to simplify the steps after that.

0. Create a basic Chrome extension
   a. Add the following to the manifest. I'm running my content-script on zoom

"manifest_version": 3,
"host_permissions": ["*://*.zoom.us/*"],
"content_scripts": [{
  "matches": ["*://*.zoom.us/*"],
  "js": ["your-js-script.js"]
}]

1. Install material UI v5

yarn add @mui/material @emotion/react @emotion/styled

2. Inject an HTML element that will serve as a react root in the content script

  const appRoot = document.createElement('div');
  appRoot.id = 'talka-root';
  document.body.prepend(appRoot);

3. Create a react root and use a Material UI component, like Button or Typography

createRoot(appRoot).render(<Typography>Test</Typography>)

Current behavior

Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')

Expected behavior

To load the mui components

Context

I am creating an extension for when a user opens a zoom link it adds a button bellow the 'Launch Meeting' zoom button. I was trying to using @mui to create that button and everything else, but no success.

Your environment

npx @mui/envinfo

Need to install the following packages:
@mui/envinfo@2.0.19
Ok to proceed? (y) 

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: 124.0.2478.105
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.15 
    @mui/icons-material: ^5.15.15 => 5.15.15 
    @mui/material: ^5.15.15 => 5.15.15 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react: ^18.2.79 => 18.2.79 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: 4.9.5 => 4.9.5 

tsconfig.json

{
	"extends": "@abhijithvijayan/tsconfig",
	"compilerOptions": {
		"target": "es5", // ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'.
		"module": "esnext", // Module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
		"lib": [
			"dom",
			"dom.iterable",
			"esnext"
		],
		"declaration": false,
		"isolatedModules": true,
		/* Additional Checks */
		"useDefineForClassFields": true,
		"skipLibCheck": true,
		/* Custom Options */
		// "strict": false,
	},
	"include": [
		"source",
		"webpack.config.js"
	]
}

Search keywords: emotion; mui-v5; content-script.

[brijeshb42]

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.

[github-actions]

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.

[rickerp]

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

[brijeshb42]

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

[rickerp]

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.

[rickerp]

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