Comments (6)
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.
Related Issues (20)
- When trying to link an application using MUI v5, application gets "TypeError: Cannot read properties of null (reading 'useContext')"
- can't set drawer root element HOT 1
- [material-ui][Rating] Screen reader announces incorrect value for maximum amount of stars
- [core] Fix eslint-plugin-react-compiler issues HOT 8
- Maps autocomplete example documentation incomplete
- [examples] Migrate Next.js config.next.js to config.next.mjs HOT 1
- dashed borderStyle does not work for Divider with text HOT 1
- Checkbox component don't honor passed in color when theme has default props for MuiSvgIcon HOT 1
- [joy-ui] Cannot set `color` or `bgcolor` of `Box` when used in Next.js HOT 1
- [Breadcrumbs] Allow overriding `onClick` button base of ellipsis icon
- [Alert] TS error when using slotProps with customised component HOT 2
- [react 19][tooltip] Accessing element.ref was removed in React 19
- [material-ui] Prototype pollution security vulnerabililty in @mui/utils HOT 6
- [material-ui] Sign-in template improvements
- [material-ui] Dashboard template improvements
- [material-ui][Masonry] layout forms a single column when the first item is hidden HOT 2
- MUI Joy UI Autocomplete crashing my app
- [Snackbar][docs] Stop recommending the usage of notistack, the library is seemingly no longer (properly) maintained
- Include the fix for pollution vulnerability in deepmerge in version 5 HOT 2
- ChromeVox unable to linearly navigate into Dialog
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.