sufficientLime / Tinder FastMatch

// ==UserScript==
// @namespace     https://openuserjs.org/users/93402347
// @name          Tinder FastMatch
// @description   Shows the image of someone who has already liked you on Tinder.
// @copyright     2017, 93402347 (https://openuserjs.org/users/93402347)
// @license       MIT
// @version       1.0.1
// @include       https://tinder.com/*
// @grant none
// ==/UserScript==

// ==OpenUserJS==
// @author 93402347
// ==/OpenUserJS==

(function() {
    'use strict';
    fetch('https://api.gotinder.com/v2/fast-match/preview', {
        mode: 'cors',
        credentials: 'include',
        headers: new Headers({
            'X-Auth-Token': localStorage.getItem('TinderWeb/APIToken'),
            'app-version': 1000000,
            'platform': 'web',
        })
    })
    .then(res => Promise.all([res, res.arrayBuffer()]))
    .then(([res, imgData]) => {
        // Unfortunately, the 'fast-match-count is blocked by not being present in the Access-Control-Expose-Headers response header, so this is only viewable from devtools
        // const likes = res.headers.get('fast-match-count');

        const img = 'data:image/png;base64,' + btoa(String.fromCharCode.apply(null, new Uint8Array(imgData)));
        const name = '← They like you!';
        const msg = `Swipe right on them!`;
        const innerHTML = `<div class="messageListItem__avatar D(ib) Flxg(0)"><img src="${img}" class="avatar D(ib) Bdrs(50%) Va(m) Bgc($c-placeholder) H(74px) W(74px)" alt="${name}" draggable="false"></div><div class="messageListItem__info D(f) Flx($flx1) Ov(h) Fld(c) Pend(10px)"><div class="messageListItem__nameAndBadges"><h3 class="messageListItem__name D(ib) Fw($semibold)">${name}</h3><span class="badge D(ib) Bgz(ct) Bgp(c) Bgr(nr) Va(m) badge--gold W(24px) H(24px) Va(tb) Mstart(4px)"></span></div><div class="messageListItem__message Ov(h) Whs(nw) Tov(e)"><span class="text">${msg}</span></div></div>`;
        const matchedEl = document.createElement('span');
        matchedEl.className = "D(f) Ai(c) Pos(r)--s";
        matchedEl.style = "background: #f6fafd; border-bottom: 1px solid #e5e9ec";
        matchedEl.innerHTML = innerHTML;

        // const list = document.querySelector('.messageList');
        // list.insertBefore(matchedEl, list.firstChild);

        const setList = () => {
            setTimeout(() => {
                const list = document.querySelector('.desktopMessageListHeader');
                if (list) list.parentNode.insertBefore(matchedEl, list);
                else setList();
            }, 100);
        };
        setList();
    });
})();