qr-code.js

// ==UserScript==
// @name         QR Code Generator
// @namespace    http://tampermonkey.net/
// @version      2024-07-20
// @description  Generate a QR code from your clipboard with OPT+Q!
// @author       Todd Sharp (shartodd@twitch.tv)
// @match        *://*/*
// @grant        GM_addElement
// ==/UserScript==

(function() {
    'use strict';
    let qrLibLoaded = false;
    document.querySelector('body').addEventListener('keyup', async (e) => {
        if(e.code == 'KeyQ' && e.altKey) {
            console.log("generate a qr code");
            const clipboardValue = await navigator.clipboard.readText();
            console.log(clipboardValue);
            if(!qrLibLoaded){
                const scriptEl = GM_addElement('script', {
                    src: 'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js',
                    type: 'text/javascript'
                });
                scriptEl.addEventListener("load", () => {
                    generateQr(clipboardValue);
                });
                qrLibLoaded = true;
            }
            else {
                generateQr(clipboardValue);
            }
        }
    }, true);
    const generateQr = (val) => {
        const qrCode = document.createElement('div');
        qrCode.style = 'margin-bottom: 5px';

        new QRCode(qrCode, {
            text: val,
            width: 256,
            height: 256,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });

        const dialog = document.createElement('dialog');
        dialog.style = 'border: 1px solid black; border-radius: 5px; padding: 15px; background-color: white;';
        
        const header = document.createElement('div');
        header.style = 'display: flex; justify-content: end; margin-bottom: 10px;'

        const closeBtn = document.createElement('button');
        closeBtn.style = 'border: none; padding: 2px; background-color: rgb(0,0,0,0);';
        closeBtn.innerHTML = '×';

        header.appendChild(closeBtn);
        dialog.appendChild(header);
        dialog.appendChild(qrCode);

        document.body.appendChild(dialog);
        dialog.showModal();

        closeBtn.focus();

        closeBtn.addEventListener('click', (evt) => {
            console.log('close it');
            dialog.remove();
        });
    };
})();