CSUI; can I reinject?
Alright, I'm pretty beginner at React & Plasmo, so apologize if I mess up some of my terminology here.
My goal is to add custom buttons to the send window in the ChatGPT UI, and it actually worked pretty awesome first-try with Plasmo CSUI. I just exported my component as default and also exported getInlineAnchor(), and now my buttons appear each time I load the site.
The issue is that, every time you change chats in the ChatGPT UI, the the element is replaced with a new one, so whenever I switch chats, my buttons disappear again. They obviously come back when the page refreshes, but refreshing each time is not ideal.
Example video: https://share.cleanshot.com/vd6nQDPD
Solution:Jump to solution
AFAIK you can't "reinject" CSUI
Your best bet right now is it to inject the CSUI manually from a regular content script and have a listener (e.g. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) to know when to reinject...
MutationObserver - Web APIs | MDN
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.
11 Replies
Solution
AFAIK you can't "reinject" CSUI
Your best bet right now is it to inject the CSUI manually from a regular content script and have a listener (e.g. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) to know when to reinject
MutationObserver - Web APIs | MDN
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.
Since React doesn't require a compilation, it should be a breeze to reinject it
Thanks!
Gave +1 Rep to @avi12
Got it working! Creating my own Shadow div & manually adding TailwindCSS was a bit annoying, but was able to get it done in <10mins. Thanks again.
Hi mate, could you please share some code? I'm struggling with the same issue here.
How to inject the CSUI manually?
Yeah sure
give me a sec
@emil has reached level 1. GG!
here you go. Just used a MutationObserver and normal React render Method to render my component
oh thanks mate! I thought there is some plasmo functionality which is not presented in docs
Gave +1 Rep to @emil