How to mount component when clicking on a element with certain class?
What I'm doing is I'm marking some certain HTML tags and giving them a class, I want to mount a component not when the page loads, but when user clicks on specific element
https://www.plasmo.com/blog/posts/content-scripts-ui - I pretty match want this example with Toucan.
I've searched the docs, but didn't really find what I need.
So I kinda want to listen of that anchor element was clicked, and only then mount and show the component, or maybe it could be there just hidden and not interactive
Content Scripts UI: Next-gen UI Injection for Web Extensions
Building user interfaces in a web extension is deceptively tricky, but it doesn't have to be with the Plasmo Framework
8 Replies
@louisgv any hints appreciated, probably just missed something.
Yeah you can just use an overlayanchor on top of your entire page, and spawn an event listener on the element you wish to unhide your element
The trick is to add the event listener using react
and query the element you wanna watch for from your overlay CSUI
Gotcha, i'll try! just wanted to say Plasmo is really great tool!
Hey louis, i'm still stuck at this problem, sorry to bother you, but maybe you could provide some kind of an example? pseudo will do, thanks in advance.
Gave +1 Rep to @louisgv
@skromez has reached level 1. GG!
actually, I think I found it with google sidebar.
https://github.com/PlasmoHQ/examples/blob/main/with-content-scripts-ui/contents/google-sidebar.tsx
GitHub
examples/with-content-scripts-ui/contents/google-sidebar.tsx at mai...
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples
is it the same approach?
It uses a custom button, but pretty much same idea yeah!