Lemmyで元投稿がMastodonなら埋め込みを表示する

script.js

let body = document.querySelector('body');
const config = {
    childList: true,
    subtree: true
};
const observer = new MutationObserver(records => {
    observer.disconnect();
    checkMastodon();

})
window.addEventListener('load', () => {
    checkMastodon();
    let body = document.querySelector('body');
    observer.observe(body, config);
})
function checkMastodon(){
    let count = 0;
    let timer = setInterval(() => {
        if(document.querySelector('.post div.post-title') != null && document.querySelector('.mastodon-embed') === null){
            const mastodonList = ["md.korako.me", "fedibird.com", "precure.ml", "mstdn.b-shock.org", "foresdon.jp"];

            try {
                if(document.querySelector('.post-container > div > div.row > div.flex-grow-1 > div.d-flex > a:nth-child(3)') != null){
                    const postLink = document.querySelector('.post-container > div > div.row > div.flex-grow-1 > div.d-flex > a:nth-child(3)').getAttribute("href");
                    const postDomain = new URL(postLink).host;
                    if (mastodonList.includes(postDomain)){
                        setMastodonEmbed(postLink, postDomain);
                    }
                    count = 11;
                }else if(document.querySelector('.post-container div.post-title > h1 > a') != null){
                    const postLink = document.querySelector('.post-container div.post-title > h1 > a').getAttribute("href");
                    if (postLink.charAt(0) != "/"){
                        const postDomain = new URL(postLink).host;
                        if (mastodonList.includes(postDomain)){
                            setMastodonEmbed(postLink, postDomain);
                        }
                    }
                    count = 11;
                }
            } catch (error) {
                console.error("解析に失敗しました");
                console.error(error);
                count = 11;
            }
        }
        count++;
        if(count > 10){
            clearInterval(timer);
            let body = document.querySelector('body');
            observer.observe(body, config);
        }
    }, 500)
}
function setMastodonEmbed(postLink, postDomain){
    if (postLink != "") {
        try {
            let embedHtml = '<div class="mastodon-embed"><iframe src="' + postLink + '/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="100%" allowfullscreen="allowfullscreen"></iframe></div>';
            let embedDiv = document.createElement('div');
            embedDiv.innerHTML = embedHtml;
            document.querySelector('article#postContent > div.md-div').before(embedDiv);
            (async ()=>{
                await loadMastodonScript();
            })();
        } catch (error) {
            console.error('Mastodon投稿の埋め込みに失敗しました');
            console.error(error);
        }
    }
}

function loadMastodonScript() {
    return new Promise((resolve, reject) => {
        var ready = function (loaded) {
          if (document.readyState === 'complete') {
            loaded();
          } else {
            document.addEventListener('readystatechange', function () {
              if (document.readyState === 'complete') {
                loaded();
              }
            });
          }
        };

        ready(function () {
          /** @type {Map<number, HTMLIFrameElement>} */
          var iframes = new Map();

          window.addEventListener('message', function (e) {
            var data = e.data || {};

            if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) {
              return;
            }

            var iframe = iframes.get(data.id);

            if ('source' in e && iframe.contentWindow !== e.source) {
              return;
            }

            iframe.height = data.height;
          });

          [].forEach.call(document.querySelectorAll('iframe.mastodon-embed'), function (iframe) {
            // select unique id for each iframe
            var id = 0, failCount = 0, idBuffer = new Uint32Array(1);
            while (id === 0 || iframes.has(id)) {
              id = crypto.getRandomValues(idBuffer)[0];
              failCount++;
              if (failCount > 100) {
                // give up and assign (easily guessable) unique number if getRandomValues is broken or no luck
                id = -(iframes.size + 1);
                break;
              }
            }

            iframes.set(id, iframe);

            iframe.scrolling = 'no';
            iframe.style.overflow = 'hidden';

            iframe.onload = function () {
              iframe.contentWindow.postMessage({
                type: 'setHeight',
                id: id,
              }, '*');
            };

            iframe.onload();
          });
        });
    });
}