lightweight-inspector

Just one of the things I'm working on. https://github.com/hchiam/learning

2 goals

1. enable minimally inspecting only a few things in js/css/html in a browser on a mobile device, and

2. make it easier to trust by making it easier to find and read the whole code on GitHub. (no deps)

script.js code

https://github.com/hchiam/lightweight-inspector/blob/main/script.js

bookmarklet to run the script.js

MAKE SURE YOU UNDERSTAND THE CODE IN script.js BEFORE YOU USE THIS OR ANY BOOKMARKLET CLAIMING TO USE IT!

bookmarklet to automatically use the latest version

(click to expand)

javascript:(()=>{
    fetch('https://api.github.com/repos/hchiam/lightweight-inspector/releases/latest')
        .then(x=>x.json())
        .then(x=>{
            const src = `https://raw.githubusercontent.com/hchiam/lightweight-inspector/${x.tag_name}/script.js`;
            try {
                if (!document.addedLightweightInspectorSecuritypolicyviolationEventListener) {
                    document.addedLightweightInspectorSecuritypolicyviolationEventListener = true;
                    document.addEventListener('securitypolicyviolation', (e) => {
                        alert(`CSP blocking lightweight-inspector`);
                    });
                }
                fetch(src).then(x=>x.text()).then(x=>{eval(x);});
            } catch(e) {
                try {
                    const script = document.createElement('script');
                    script.src = src;
                    document.body.append(script);
                } catch(e) {
                    alert(`couldn't start lightweight-inspector`);
                }
            }
        });
})();

bookmarklet example locked to version 0.5.1

to avoid automatic updates:

(click to expand)

javascript:(()=>{
    const src = 'https://raw.githubusercontent.com/hchiam/lightweight-inspector/0.5.1/script.js';
    try {
        if (!document.addedLightweightInspectorSecuritypolicyviolationEventListener) {
            document.addedLightweightInspectorSecuritypolicyviolationEventListener = true;
            document.addEventListener('securitypolicyviolation', (e) => {
                alert(`CSP blocking lightweight-inspector`);
            });
        }
        fetch(src).then(x=>x.text()).then(x=>{eval(x);});
    } catch(e) {
        try {
            const script = document.createElement('script');
            script.src = src;
            document.body.append(script);
        } catch(e) {
            alert(`couldn't start lightweight-inspector`);
        }
    }
})();

with console-log-element

Firefox on mobile seems to make it a little harder to run bookmarklets from your saved bookmarks. if you're using console-log-element to run the above bookmarklet in Firefox on mobile, here's a helpful code snippet to hide it when you don't need it anymore:

$('#firefox-extension-console-log-element')?.remove();$('#script_firefox-extension-console-log-element')?.remove();

local development

local development notes

(using bun)

this will automatically run http://localhost:3000:

bun dev

(Howard currently has https://lightweight-inspector.vercel.app automatically updated upon commit.)

and for Howard to deploy to https://lightweight-inspector.surge.sh/ and/or https://lightweight-inspector.vercel.app run this:

bun run deploy

if bun run deploy seems to have difficulty deploying to vercel via CLI, then a deploy webhook can instead be set up (to avoid having to change the github noreply email used in commits): https://stackoverflow.com/questions/79011901/error-vercel-git-author-must-have-access-to-the-project-on-vercel-to-create-d (and then bun run deploy is no longer necessary)