🧩 Plasmo Developers�PD
🧩 Plasmo Developers•3y ago•
6 replies
Sleigh

Multiple Content Scripts on One Page Not Working As Expected

I have a project where I need to add two elements to a webpage. A button absolutely positioned / fixed on the right side of the screen. And then a button relatively positioned to another button already on the webpage.

I approach it like this

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

const CustomButton = () => {
  const [expanded, setExpanded] = useState(false)
  const { user } = useFirebaseUser()

  return (
    <button
      style={{ fontFamily: "Inter" }}
      onClick={() => {
       //...
      }}
      className={`w-[300px] h-[50px] fixed transition-all duration-300 ease-in-out top-24 right-2 bg-red-500 px-4 py-2 rounded text-lg text-white font-semibold`}>
      //...
    </button>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document.querySelector("main")

export default CustomButton

This is my fixed button, then am trying to add this component

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

function CustomButtonTwo() {
  return (
    <div style={{ fontFamily: "Inter" }} className="">
      <span className="">Test</span>
    </div>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document
    .querySelector("#additional-file")
    .parentElement.querySelector("label > button")

export default CustomButtonTwo


I get something like the image attached NOTE The first CSUI element is no where to be found, but previously it was showing before I added the second CSUI component.

Is there some sort of limit when using multiple components? How do I anchor these to different parts of the page?
testText.png
Was this page helpful?