PD
🧩 Plasmo DevelopersPallas
At your service, browser extension
At your service, browser extension developer using Plasmo!
The reason why
document.getElementById is returning null for elements in CSUI (assuming you are referring to the Chrome User Interface) is because the elements in the CSUI are part of the browser's internal implementation and are not directly accessible to the content scripts of browser extensions. Content scripts can only access the DOM of the web page itself, not the browser's UI.
To interact with elements in the CSUI, you need to use a different approach, which is assigning refs instead. Refs, short for references, allow you to create a reference to a specific element in the DOM, even if it is not directly accessible through the document object.
By assigning a ref to an element in the CSUI, you can then access and manipulate that element using the ref. This is a common practice in browser extension development when you need to interact with UI elements in the browser's interface.
It's worth noting that the specific implementation of assigning refs may vary depending on the framework or library you are using for your browser extension development. For example, if you are using React, you can use the ref attribute to assign a ref to an element.
I hope this explanation helps! If you have any more questions or need further clarification, feel free to ask. And here's a little trivia for you: Did you know that the concept of browser extensions was first introduced by Opera Software in 1999?postonsundays•204d ago
@louis any of the maintainers able to comment on this?
Arcane•204d ago
@postonsundays has reached level 2. GG!
lab•204d ago
@postonsundays lol yeah I think it's tripping
Also since CSUI is encapsulated inside a ShadowDOM, you can't get the element directly
postonsundays•204d ago
i can see CSUI is above the body, in my case there's a huge list of items it'd be hard to individually assign refs to in the CSUI. any ideas?
lab•204d ago
There's the anchor passed down to the CSUI that you can use to do querySelector on top of (that should point to the anchor element node on top), you might still need to traverse down the shadow DOM
It depends on your use case. easiest is just spawn those element on an absolute CSUI and mount them manually, keeping a state variable for each of the element
or you can use anchorList but ymmv
postonsundays•204d ago
hm like the absolute idea, any open-source examples to refer to?
lab•203d ago
see
the with-content-scripts-ui2.1KMembers
View on DiscordWant results from more Discord servers?
More PostsAnyone tried HTMX?Hey all, I'm working on a chrome-extension poc that ideally is made entirely with HTMX, for the momeWhy do I keep getting the errors of `Uncaught Error: Extension context invalidated.` and `React.jsx`Hi there. I noticed that whenever I refresh the extension or do anything to it, the following errorsMantine Example is Deprecated`plasmo-with-mantine` example is **deprecated**. Mantine v7.0 no longer uses `emotion` or `emotionCaHow to load SVG in CSSIn the docs I found https://docs.plasmo.com/framework/import
So I did
```scss
.card-stats {
backgrMessaging between two content scriptsHi! How would I go on to send a message from one content script to another using Plasmo? The basic cIs there a way to send a message to the Chrome extension from the backend server?I'm implementing lightweight "in-extension" support for my users. If a user asks a question or submiAccess env variables with dynamic keys?I can access process.env['PLASMO_PUBLIC_HELLO'], but not process.env[`PLASMO_PUBLIC_${key}`],
Is theLosing styles when injecting popup component in CSUINo matter if the CSUI is
```html
<script context="moudule" lang="ts">
import Dashboard from "~popuAdd content scripts dynamically.Hello everyone 🖐🏼,
I am currently working on developing a Chrome plugin, and I have a specific scadd an element to a pageHow can I do this?change extension icon after pressing a buttonHow to do this on chrome and firefox?Import a custom package styling (React-hot-toast)Hi. I am trying to utilize the react-hot-toast package in my Plasmo content script. When importing side panel default_pathIs there a way to tell Plasmos to *not* set the `sidebar.default_path` when generating the manifest?content.tsx with TailwindCSS affected by page stylesI have a content.tsx using TailwindCSS for styling. My project setup is using the template TailwindCAnyone got devtools working with a React front end?Struggling to get this working and would like some help.Is there solid-js support?I am building an extension with typescript and solid-js and was thinking of using the plasmo framewoMultiple Content Scripts on One Page Not Working As ExpectedI have a project where I need to add two elements to a webpage. A button absolutely positioned / fixcan we use jsx instead of tsx?by default plasmo setup creates ts and tsx files, and I was wondering if I have option to use js andInput box Backspace events are preventedI am injecting buttons in a website that opens various modals for people to fill out forms.
EverythiHow to create a custom pageHi,
I just started learning `Plasmo` yesterday.
I started using the `with-nextjs` example.
How do