🧩 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

labOP•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!

labOP•2y ago

then, your CSUI should mount on top of that elemetn

Unknown User•2y ago

Message Not Public

labOP•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

labOP•2y ago

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

Unknown User•2y ago

Message Not Public

labOP•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

labOP•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!

labOP•2y ago

Be more specific with your selector.

Unknown User•2y ago

Message Not Public

labOP•2y ago

this selector is abit dangerous to use FYI twitter uses reatnative and that class is a css-in-js class so very likely it will change regularly. Another way to do it is to make your own selector by look through the DOM tree and see what's the most effective way to grab that spot using class name is putting yourself at the mercy of twitter's css namespacing and class name resolving. The most stable selector are id and then DOM tree traversal

Unknown User•2y ago

Message Not Public

labOP•2y ago

Try inlineAnchor

Gaming

Programming

How to use Inline Anchor