Advertisement
azizkhelifi

Untitled

Aug 18th, 2022
683
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // @ts-nocheck
  2. // prettier-sort-ignore
  3. import React from "react"
  4.  
  5. import * as RawMount from "__plasmo_mount_content_script__"
  6. import { createRoot } from "react-dom/client"
  7.  
  8. // Escape parcel's static analyzer
  9. const Mount = RawMount
  10.  
  11. const MountContainer = () => {
  12.  // const [top, setTop] = React.useState(0)
  13.  //  const [left, setLeft] = React.useState(0)
  14.  
  15.   React.useEffect(() => {
  16.     if (typeof Mount.getMountPoint !== "function") {
  17.       return
  18.     }
  19.    /*  const updatePosition = async () => {
  20.       const anchor = (await Mount.getMountPoint()) as HTMLElement
  21.  
  22.       const rect = anchor?.getBoundingClientRect()
  23.  
  24.       if (!rect) {
  25.         console.error("getMountPoint is not returning a valid HTMLElement")
  26.         return
  27.       }
  28.  
  29.       const pos = {
  30.         left: rect.left + window.scrollX ,
  31.         top: rect.top + window.scrollY
  32.       }
  33.  
  34.       setLeft(pos.left)
  35.       setTop(pos.top)
  36.     }
  37.  
  38.     updatePosition()
  39.  
  40.     window.addEventListener("scroll", updatePosition)
  41.     return () => window.removeEventListener("scroll", updatePosition)
  42.     */
  43.  
  44.   }, [])
  45.  
  46.   return (
  47.     <div
  48.       id="plasmo-mount-container"
  49.       style={{
  50.         display: "flex",
  51.         position: "relative",
  52.         //top,
  53.         //left
  54.       }}>
  55.       <RawMount.default />
  56.     </div>
  57.   )
  58. }
  59.  
  60. async function createShadowContainer() {
  61.   const container = document.createElement("div")
  62.   container.id = "plasmo-shadow-container"
  63.  
  64.   container.style.cssText = `
  65.     z-index: 1;
  66.     `
  67.     //position: absolute;
  68.  
  69.   const shadowHost = document.createElement("div")
  70.  
  71.   if (typeof Mount.getShadowHostId === "function") {
  72.     shadowHost.id = await Mount.getShadowHostId()
  73.   }
  74.  
  75.   const shadowRoot = shadowHost.attachShadow({ mode: "open" })
  76.   let anchor = (await Mount.getMountPoint()) as HTMLElement
  77.   if (!anchor)
  78.     anchor = document.querySelector("body")
  79.   if(anchor.nextSibling){
  80.     anchor.parentNode.insertBefore(container, anchor.nextSibling);
  81.   }else{
  82.     anchor.parentNode.appendChild(container);
  83.   }
  84.   anchor.insertAdjacentElement("beforebegin", shadowHost)
  85.  
  86.   if (typeof Mount.getStyle === "function") {
  87.     shadowRoot.appendChild(await Mount.getStyle())
  88.   }
  89.  
  90.   shadowRoot.appendChild(container)
  91.   return container
  92. }
  93.  
  94. window.addEventListener("load", async () => {
  95.   const rootContainer =
  96.     typeof Mount.getRootContainer === "function"
  97.       ? await Mount.getRootContainer()
  98.       : await createShadowContainer()
  99.   const root = createRoot(rootContainer)
  100.   root.render(<MountContainer />)
  101. })
  102.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement