ngrok bookmarklet - add qr codes to the http://127.0.0.1:4040/status page

README.md

ngrok qr codes

description

since the free version of ngrok creates random urls each time you run it, it gets time consuming typing the url on your phone. this bookmarklet lets you point your phone at the "status" page of ngrok's "web interface".

instructions

1. Save the ngrok-qr-codes.bookmarklet.js as a "bookmark" in your browser
2. Run ngrok from the command line. It will spit out some urls
3. Visit the web interace "status page": http://127.0.0.1:4040/status
4. Run the bookmarklet you created in step 1
5. Point your phone at 1 of the qr codes that were created

ngrok-qr-codes.bookmarklet.js

javascript:(() => {const s = document.createElement('script');s.src = 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js';s.onload = () => {[...document.querySelectorAll('th')].filter(el => el.innerHTML === 'URL').forEach(el => {const td = el.parentElement.children[1];const url = td.innerHTML;const div = document.createElement('div');el.appendChild(div);new QRCode(div, url);});};document.body.appendChild(s);})();

ngrok-qr-codes.js

// visit:
// http://127.0.0.1:4040/status
//
// and run this script in your browser's dev console
(() => {
    const s = document.createElement('script');
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js';
    s.onload = () => {
        [...document.querySelectorAll('th')]
            .filter(el => el.innerHTML === 'URL')
            .forEach(el => {
                const td = el.parentElement.children[1];
                const url = td.innerHTML;
                const div = document.createElement('div');
                el.appendChild(div);
                new QRCode(div, url);
            });
    };
    document.body.appendChild(s);
})();

updated version was posted here:
inconshreveable/ngrok#472 (comment)