[Q/A] How to anchor a CSUI without requiring the user to scroll

[callmekatootie]

What is the example you wish to see?

Anchor a react component to a specific element, without requiring the user to scroll first.

Is there any context that might help us understand?

For the documentation of getOverlayAnchor(), it states:

getOverlayAnchor first listens to the current window's scroll event. On each scroll event, it uses the getBoundingClientRect function to calculate the absolute position of the target element. Then, it applies the calculated position to the container used to mount your component.

This results in my UI element first appearing at the top left of the page - and only when the user scrolls, the component rightly appears at the position I need it to be.

However, I don't anticipate my users scrolling the page - how can I go about ensuring that the react component shows up exactly where I want it to? Is the function that calculates the position exported for us to reuse and call when we want to? Or is there a different approach to take here.

Code of Conduct

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

[louisgv]

Try using this method: https://docs.plasmo.com/browser-extension/content-scripts-ui#watchoverlayanchor

The scroll event is a naive implementation and the easiest to trigger for most case when mounting overlay csui, but you can provide your own observer/watcher

[callmekatootie]

Thank you. That did work. Follow up question - Is it fine to use setInterval() without clearing the interval - or must the updatePosition() be called periodically? Does Plasmo take care of cancelling the set interval function?

[louisgv]

You can return a cleanup function as the output of watchOverlayAnchor, which will be triggered when the component unmount :)