How to use Inline Anchor
COMPLETE noob to javascript and html, and I'm trying to setup an inline anchor for the twitter checkmark. Can anyone help me understand how to do that? Documentation is leaving me dazed and confused
@nullport Moved this to here for future look-up (we will also improve the doc using these Q/A as well :p)
20 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Basically the idea is exporting a
getInlineAnchor
that returns an element on the page
to get the twitter checkmark, you would look up its selector in the inspector, and use document.getSelector to grab that element, then return it in the getInlineAnchorUnknown User•2y ago
Message Not Public
Sign In & Join Server To View
@nullport has reached level 1. GG!
then, your CSUI should mount on top of that elemetn
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
A
selector
is a concept in HTML5 (with JS DOM), where you can use it to query an element on the web page
any element on a web page can be selected via a "selector"Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yup, and its' very flexible. You can use classname, id, nested tree, etc...
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
so plasmo implements a MutationObserver internally (you don't have to worry about it, and you can even override it to suit your need).
This means that it will call that getInlineAnchor fx each time there's some DOM change until it can find an element to mount the react component on
you can console log inside that getInlineAnchor function too before you return your element
i.e:
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
For multiple element, use the
getInlineAnchorList
functionUnknown User•2y ago
Message Not Public
Sign In & Join Server To View
@nullport has reached level 2. GG!