Raw Source Toggle Dropdown

• Minified Source

forsureitsme / Tinder FastMatch

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

// ==OpenUserJS==
// @author forsureitsme
// ==/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');

        let innerHTML;
        if(!imgData.byteLength) {
            innerHTML = `
                <div class="messageListItem__info D(f) Flx($flx1) Ov(h) Fld(c) P(10px) Ta(c)">
                    <div class="messageListItem__nameAndBadges">
                        <h3 class="messageListItem__name D(ib) Fw($semibold)">No likes pending.</h3>
                    </div>
                    <div class="messageListItem__message Ov(h) Whs(nw) Tov(e)">
                        <span class="text">Like them first!</span>
                    </div>
                </div>
            `;
        } else {
            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!`;
            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();
    });
})();