🧩 Plasmo Developers•2y ago

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

lab•2y ago

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 getInlineAnchor

Unknown User•2y ago

Message Not Public

Arcane•2y ago

@nullport has reached level 1. GG!

lab•2y ago

then, your CSUI should mount on top of that elemetn

Unknown User•2y ago

Message Not Public

lab•2y ago

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

lab•2y ago

yup, and its' very flexible. You can use classname, id, nested tree, etc...

Unknown User•2y ago

Message Not Public

lab•2y ago

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:

export const getInlineAnchor: PlasmoGetInlineAnchor = () => {
const el = document.querySelector(etc...)   
console.log(el)
return el
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () => {
const el = document.querySelector(etc...)   
console.log(el)
return el
}

Unknown User•2y ago

Message Not Public

lab•2y ago

For multiple element, use the getInlineAnchorList function

Unknown User•2y ago

Message Not Public

Arcane•2y ago

@nullport has reached level 2. GG!

Gaming

Programming

How to use Inline Anchor