PD
🧩 Plasmo DevelopersSeven_

Can't access other elements outside the plasmo-csui shadow root

I'm trying to get the unique url of a tweet container when i click on the button I'm rendering. I have already specified where i want my button to be attached in the DOM. Ideally, i treid listening to the currentTarget of the click event and try to get the closest element with the attibut I have set. But it always return null. I've also tried storing the lins in localStorage. But it seems as though my approach was still flawed. This is an excerpt of what my CSUI code looks like. 
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll('[data-testid="bookmark"]')

  return Array.from(anchors).map((element) => {
    return {
      element,
      insertPosition: "beforebegin"
    }
  })
}

const CreateBookmark = () => {
  const { openToast } = useToastContext()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [tweetLink, setTweetLink] = React.useState<string>("")


  const openModal = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation()
    event.preventDefault()

    const url = event.currentTarget.closest('[data-testid="bookmark"]').getAttribute("data-tweet-link")

    setTweetLink(url)
  }

  return (
    <ChakraProvider>
      <Button
        type="button"
        onClick={openModal}
        style={{
          background: "#8e3dff",
          height: "30px",
          width: "100%",
          border: "none",
          color: "#fff",
          fontSize: "14px",
          borderRadius: "18px",
          textTransform: "capitalize",
          margin: "0 22px",
          cursor: "pointer",
          fontWeight: "bold"
        }}>
        bookmark
      </Button>
    </ChakraProvider>
  )
}
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll('[data-testid="bookmark"]')

  return Array.from(anchors).map((element) => {
    return {
      element,
      insertPosition: "beforebegin"
    }
  })
}

const CreateBookmark = () => {
  const { openToast } = useToastContext()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [tweetLink, setTweetLink] = React.useState<string>("")


  const openModal = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation()
    event.preventDefault()

    const url = event.currentTarget.closest('[data-testid="bookmark"]').getAttribute("data-tweet-link")

    setTweetLink(url)
  }

  return (
    <ChakraProvider>
      <Button
        type="button"
        onClick={openModal}
        style={{
          background: "#8e3dff",
          height: "30px",
          width: "100%",
          border: "none",
          color: "#fff",
          fontSize: "14px",
          borderRadius: "18px",
          textTransform: "capitalize",
          margin: "0 22px",
          cursor: "pointer",
          fontWeight: "bold"
        }}>
        bookmark
      </Button>
    </ChakraProvider>
  )
}
Any help on how to get the exact link that corresponds when i click on a specific button would be highly appreciated.
Want results from more Discord servers?
Add your server
More Posts
Flutter supportIt would be interesting to see Plasmo supporting Flutter nativelyHow do I forward an API request from inside a React component to the BGSW?Hey all! I'm making an extension that currently has a single content script which loads up a small dAh, hello there! When it comes toAh, hello there! When it comes to obtaining microphone permissions within a side panel in your PlasmReferenceError: _messaging is not defined while using sendToBackground()I am getting this weird error while trying to use the plasmo messaging package from my content scrip