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

1 Reply

TikaïOP•2mo ago

Actually found it, if some reach the same issue, use the parent selector into getInlineAnchorList and use mountShadowHost to specify where to position it

export const mountShadowHost: PlasmoMountShadowHost = ({
  shadowHost,
  anchor,
  mountState
}) => {
  anchor.element.querySelector('& > div:first-child').appendChild(shadowHost)
  mountState.observer.disconnect() // OPTIONAL DEMO: stop the observer as needed
}

export const mountShadowHost: PlasmoMountShadowHost = ({
  shadowHost,
  anchor,
  mountState
}) => {
  anchor.element.querySelector('& > div:first-child').appendChild(shadowHost)
  mountState.observer.disconnect() // OPTIONAL DEMO: stop the observer as needed
}

Gaming

Programming

Using getInlineAnchorList but having plasmocsui into a child