Tikaï Posts - Answer Overflow

Tikaï

•Created by Tikaï on 10/24/2024 in #🔰newbie

Pass custom props to CSUI component

Hello, Because I am generating multiple plasmo-csui within getInlineAnchorList and fetching data in it, I would like to cache that data and maybe pass it as props to the react csui component. The data will be fetched asynchronously I did try to follow this doc https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer But unfortunately, the snippet is always returning me this error. Is there a way to pass props to the react component?

8 replies

PD🧩 Plasmo Developers

•Created by Tikaï on 10/23/2024 in #🔰newbie

Using getInlineAnchorList but having plasmocsui into a child

Hey, I am trying to do a web extension for a website which contains that structure

<div>
<a class="a1" href="..">
<div class="div1"></div>
<div class="div2"></div>
</a>
<a class="a2" href="..">
<div class="div1"></div>
<div class="div2"></div>
</a>
</div>

<div>
<a class="a1" href="..">
<div class="div1"></div>
<div class="div2"></div>
</a>
<a class="a2" href="..">
<div class="div1"></div>
<div class="div2"></div>
</a>
</div>

I would like to inject the plasmo-csui which is a clickable img into the .div1 container, I can easily inject it with

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll("div > a > .div1")
  return Array.from(anchors).map((element) => {

    return {
      element,
      insertPosition: "afterbegin"
    }
  })
}

export default MyCustomClickableElement

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll("div > a > .div1")
  return Array.from(anchors).map((element) => {

    return {
      element,
      insertPosition: "afterbegin"
    }
  })
}

export default MyCustomClickableElement

but the top a is triggered first and I don't seem to be able to prevent/stopPropagation it from the MyCustmClickableElement I can achieve this by doing

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll("div > a")
  return Array.from(anchors).map((element) => {
   element.onclick = (event: PointerEvent) => {
      console.log('evet', event.target.tagName)
       if (event.target.tagName === 'PLASMO-CSUI') {
         // click on plasmo-csui
        event.preventDefault();
        event.stopPropagation();
       }
       // click on something else;
    }

    return {
      element,
      insertPosition: "afterbegin"
    }
  })
}

export default MyCustomClickableElement

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll("div > a")
  return Array.from(anchors).map((element) => {
   element.onclick = (event: PointerEvent) => {
      console.log('evet', event.target.tagName)
       if (event.target.tagName === 'PLASMO-CSUI') {
         // click on plasmo-csui
        event.preventDefault();
        event.stopPropagation();
       }
       // click on something else;
    }

    return {
      element,
      insertPosition: "afterbegin"
    }
  })
}

export default MyCustomClickableElement

Is it possible to have the getInlineAnchorList on a list of elements but the actual plasmo-csui into child element (it this case, the div)? Regards

4 replies

PD🧩 Plasmo Developers

•Created by Tikaï on 10/23/2024 in #🔰newbie

Custom MutationObserver

Hello, Thank you for this great framework! I am trying to have a custom MutationObserver, however the doc mentionned it without giving an example, can someone explains how to do it please? https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer Thanks!

10 replies

Gaming

Programming