[EXP] PlasmoGetOverlayAnchorList with lazy loading components

[teddybee]

What is the example you wish to see?

Lately I have tried out the PlasmoGetOverlayAnchorList feature. I want to change the color of links on a page, but only the mainly loaded DOM elements are working. For example the articles, that the page loads after, is not.

Is there any option to watch those changes as well? Or maybe some kind of mechanism, that I can use to trigger the scan periodically or on demand.

Is there any context that might help us understand?

For example usage on twitter.com that loads the articles after the initial layout.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[louisgv]

Thanks for the issue - can you provide an example/reproduce of how you're using the PlasmoGetOverlayAnchorList API? The exposed getter function is run on every DOM mutation, so technically if the DOM changed and new links are added, it should react to that(?) so I'm curious how you're returning the NodeList

On the other hand, to fully customize the watching behavior, you can provide a render override to implement your own watcher - would love to see what works for you

[teddybee]

This is my code in the contents directory:

import type {
   PlasmoCSUIProps,
   PlasmoContentScript,
   PlasmoGetOverlayAnchorList
} from "plasmo"

export const config: PlasmoContentScript = {
  matches: ["https://twitter.com/*"]
}

export const getOverlayAnchorList: PlasmoGetOverlayAnchorList = () => {
  const elements = document.querySelectorAll("a")
  return elements
}

const styles = {
  buttonRed: {
    backgroundColor: "red"
  }
}

const HighlightLinks = ({ anchor }: PlasmoCSUIProps) => {
  return <button style={styles.buttonRed}>{anchor.element.innerText}</button>
}

export default HighlightLinks

P.S: I am not sure if the PlasmoCSUIProps is the correct type for the Props as well. anchor?.element.href and anchor.element.innerText makes an error in typescript/linter.

[louisgv]

@teddybee are you seeing the getOverlayAnchorList method being re-run? I.e:

export const getOverlayAnchorList: PlasmoGetOverlayAnchorList = () => {
  const elements = document.querySelectorAll("a")
  console.log(elements)
  return elements
}

[teddybee]

Yes, I can see different logs, when I rolling down the page (or different length of elements arrays when loading), but the newer anchors will not be marked. For example on twitter only the left menu panel`s links will be marked, but on the center news flow and the right panel are not at all.

[louisgv]

It seems that the CSUI lifecycle is not evaluating new added anchor and only care about existing mounted anchor.

The fix would be to diff the new anchor list with the old and ensure that all new anchor are accounted for and rendered( (?)

[liangxp]

CSUI 生命周期似乎没有评估新添加的锚点，而只关心现有的挂载锚点。

解决方法是将新锚点列表与旧锚点列表进行比较，并确保考虑和呈现所有新锚点（ （？

Is there a way to monitor DOM changes and rerender through watchOverlayAnchor?

[Nitsorn]

+1 to this issue, would love to detect DOM changes. I am facing similar issue when doing

  useEffect(() => {
    // listen to keypress command + k to open the popup
    window.addEventListener('click', (e) => { console.log('clicked', e.target)}, false)
  }, [])

which could only detect correct elements if they were initially rendered, but doesn't account for elements shown or appended dynamically after.

[HowieG]

+1 want this feature! From the docs: getOverlayAnchorList does not cover dynamic case at the moment. For example, if new anchors are added to the web page after the initial rendering, the CSUI lifecycle will not be able to detect it. PR is welcome to improve this feature!

[MonsterPi13]

When will support this feature? I need to add component to those content in lazy loading.