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?7 Replies
@louis any of the maintainers able to comment on this?
@postonsundays has reached level 2. GG!
@postonsundays lol yeah I think it's tripping
Also since CSUI is encapsulated inside a ShadowDOM, you can't get the element directly
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?
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
hm like the absolute idea, any open-source examples to refer to?
see
the with-content-scripts-ui