show custom reaction in app.element.io, which has text content `mxc://*`

element-show-mxc-reaction.user.js

// ==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()