You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
How do you envision this feature/change to look/work like?
The framework should allow react developer to be able to insert React components in the middle of the page instead of just being able to create an overlay
What is the purpose of this change/feature? Why?
Sometimes I want to be able to add the content after a button or below a div to improve user experience.
(OPTIONAL) Example implementations
For example adding more context to a specific portion of the page in a facebook feed, add a component (UI styled with tailwind let's say) after every other post.
(OPTIONAL) Contribution
I would like to contribute to this RFC via a PR
Verify canary release
I verified that the issue exists in plasmo canary release
Currently this feature is not supported in Plasmo, But you can achieve this functionality using Mutation Observer to observe the element and then add whatever you want before or after that element.
Here is an example of the code that uses Arrive.js (provides events to watch for DOM elements creation and removal) that helped me:
importcssTextfrom"data-text:~/contents/style.css"importtype{PlasmoCSConfig,PlasmoGetShadowHostId}from"plasmo"import"arrive"import{useEffect}from"react"import{createRoot}from"react-dom/client"exportconstconfig: PlasmoCSConfig={matches: ["*://*.example.com/*"]}constHOST_ID="engage-csui"exportconstgetShadowHostId: PlasmoGetShadowHostId=()=>HOST_IDexportconstgetStyle=()=>{conststyle=document.createElement("style")style.textContent=cssTextreturnstyle}exportdefault()=>{useEffect(()=>{constelementSelector="#selected-element-selector"// Wait for the element to be added to the DOMdocument.arrive(elementSelector,function(element){constbuttonContainer=document.createElement("div")createRoot(buttonContainer).render(<>{/* <AnyReactComponent/> */}</>)element.insertBefore(buttonContainer,element.firstChild)})return()=>{document.unbindArrive(elementSelector)}},[])return<>{/* Element you want to add as overlay */}</>}
How do you envision this feature/change to look/work like?
The framework should allow react developer to be able to insert React components in the middle of the page instead of just being able to create an overlay
What is the purpose of this change/feature? Why?
Sometimes I want to be able to add the content after a button or below a div to improve user experience.
(OPTIONAL) Example implementations
For example adding more context to a specific portion of the page in a facebook feed, add a component (UI styled with tailwind let's say) after every other post.
(OPTIONAL) Contribution
Verify canary release
plasmo
canary releaseCode of Conduct
The text was updated successfully, but these errors were encountered: