🧩 Plasmo Developers�PD
🧩 Plasmo Developers•16mo ago•
3 replies
Tikaï

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>


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


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


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
Was this page helpful?