Skip to content

Instantly share code, notes, and snippets.

@GHolk
Created June 15, 2021 04:03
Show Gist options
  • Save GHolk/231019cee4b11318aeaf7f3394bc08a6 to your computer and use it in GitHub Desktop.
Save GHolk/231019cee4b11318aeaf7f3394bc08a6 to your computer and use it in GitHub Desktop.
show custom reaction in app.element.io, which has text content `mxc://*`
// ==UserScript==
// @name element show mxc reaction
// @namespace http://gholk.github.io/
// @version 2
// @match https://app.element.io/*
// @grant none
// ==/UserScript==
// license under gplv3 by gholk
const style = document.createElement('style')
style.textContent = `
.mx_ReactionsRowButton_content > img {
width: 16px
}`
document.head.appendChild(style)
function showMxcReaction(node = document) {
const mxcFormat = /^mxc:..([^/]+).(.+)$/
for (const react of node.querySelectorAll('.mx_ReactionsRowButton_content')) {
let scan = react.textContent.match(mxcFormat)
if (scan) {
const [,server,hash] = scan
const url = `https://matrix.ccns.io/_matrix/media/r0/thumbnail/${server}/${hash}?width=32&height=32`
const image = document.createElement('img')
image.src = url
react.childNodes[0].remove()
react.appendChild(image)
// mxc://ccns.io/pdImZHOLlrOypvGhGaAfmule
// https://matrix.ccns.io/_matrix/media/r0/thumbnail/ccns.io/quygDleBEahFNbvORCucFdSC?width=800&height=600&method=scale
}
}
}
const observer = new MutationObserver(mulist => {
for (const mutation of mulist) {
if (mutation.type == 'childList') {
node = mutation.target
showMxcReaction(node)
}
}
})
observer.observe(document.body, {
childList: true,
subtree: true
})
showMxcReaction()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment