쿠페이 비밀번호 키보드 입력 (Pure JS)

coupay_physical_keyboard.user.js

// ==UserScript==
// @name         Coupay Physical Keyboard
// @namespace    https://koreapyj.dcmys.kr/
// @version      1.0
// @description  Your mother
// @author       koreapyj, sokcuri
// @match        https://rocketpay.coupang.com/rocketpay/pay/authentication
// @icon         https://www.google.com/s2/favicons?sz=64&domain=rocketpay.coupang.com
// @grant        none
// ==/UserScript==

function getComputedStyle(selector) {
    const obj = {};
    const map = document.querySelector(selector).computedStyleMap();
    for (const [prop, val] of map) {
        if (prop === 'background-image') {
            obj['background-image'] = val?.[0]?.toString()?.replace(/url\("([^"]+)"\)/, '$1');
        } else if (prop === 'width') {
            obj['width'] = val[0].value;
        } else if (prop === 'height') {
            obj['height'] = val[0].value;
        } else if (prop === 'background-position') {
            obj['background-position'] = val[0]?.toString()?.replace(/[^0-9\s]/g, '')?.split(' ').map(x => +x);
        }
    }
    return obj;
}

async function getImageData(selector) {
    return new Promise((resolve, reject) => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const image = new Image();
        const computedStyle = getComputedStyle(selector)
        image.src = computedStyle['background-image'];
        image.onload = () => {
            context.drawImage(image, 0, 0);
            const imageData = context.getImageData(computedStyle['background-position'][0], computedStyle['background-position'][1], computedStyle['width'], computedStyle['height']);
            const sum = imageData.data.reduce((a, b) => a + b);
            resolve(sum);
        }
        image.onerror = () => {
            reject(new Error('error. image not loaded'));
        }
    });
}

async function getCoupayNumKeypad() {
    const obj = {};
    const arr = [];
    for (let i = 0; i <= 9; i++) {
        const data = getImageData('.rocketpay-keypad-position-' + i);
        arr.push(data);
    }

    const numArray = [142903, 86092, 109042, 111362, 114742, 105981, 143981, 80749, 161608, 144500];
    const prefilled = await Promise.all(arr);
    prefilled.forEach((data, n) => {
        const idx = numArray.findIndex(x => Math.floor(x / 100) === Math.floor(data / 100));
        if (idx === -1) { throw new Error('error. keypad mismatch') }
        obj[idx] = document.querySelector('.rocketpay-keypad-position-' + n).parentNode;
    });
    return obj;
}


(async function() {
    'use strict';

    const keyMap = await getCoupayNumKeypad();
    document.body.style.display = 'none'
    
    keyMap['Backspace'] = document.querySelector('.rocketpay-keypad-edit')
    for(let i=0;i<10;i++) {
        if(!keyMap[i]) throw new Error(`Failed to recognize key map. Key ${i} is missing`)
    }

    document.addEventListener('keydown', async (e) => {
        /* PIN 키보드 */
        if(keyMap) {
            const buttons = keyMap
            const {key} = e
            console.log(buttons[key]);
            buttons[key].dispatchEvent(new MouseEvent('click'))
        }
    })
    document.body.style.display = ''
    document.body.focus()
})()