Bookmarklets collection - Anthony Pena's Toolbox

Alert Run


javascript:alert('I am a link!')

multiline Run


javascript:const style = document.createElement('style');
style.innerText = 'a,a:hover,a:focus,a:visited{color: yellow;}';
document.head.append(style);

IIFE Run


javascript:(function () {
    const style = document.createElement('style');
    style.innerText = 'a,a:hover,a:focus,a:visited{color: yellow;}';
    document.head.append(style);
})()

Use cases

Set element style Run


javascript:(function() {
    document.querySelector('#element-1').style = 'border: red 1px solid'
})()

I am a bordered box

Make visible undefined/null classes Run


javascript:(() => {
    const style = document.createElement('style');
    style.innerText = '.undefined,.null{border: 1px solid red;}';
    document.head.append(style);
})()

I have undefined as class

I have null as class

Make visible not accessible images Run


javascript:(() => {
    const style = document.createElement('style');
    style.innerText = 'img:not([alt]),img[alt=""]{border: 2px dotted red;}';
    document.head.append(style);
})()

Make visible e2e selectors Run


javascript:(() => {
    const style = document.createElement('style');
    style.innerText = `
    [data-e2e]{border: 3px dashed green;}
    [data-auto]{border: 3px dashed orange;}
    [e2e-id]{border: 3px dashed blue;}
    `;
    document.head.append(style);
})()

I have data-e2e attribute

I have data-auto attribute

I have e2e-id attribute

Make site search with Google Run


javascript:(() => {
    const currentUrl = document.location.href;
    const googleSearchUrl = `https://www.google.fr/search?q=url%3A${currentUrl}%2F`;
    document.location.replace(googleSearchUrl);
})()

insert a React countdown Run


javascript:(async () => {
    const importScript = (url) => {
        const script = document.createElement('script');
        script.src = url;
        document.head.append(script);
    };
    importScript('https://unpkg.com/react@17/umd/react.development.js');
    importScript('https://unpkg.com/react-dom@17/umd/react-dom.development.js');
    const div = document.createElement('div');
    div.id = 'react-countdown';
    div.style = 'position: absolute;top:0; right:0;';
    document.body.append(div);
    setTimeout(() => {
        const Counter = () => {
            const [remaining,setRemaining] = React.useState(10);
            React.useEffect(() => {
                if (remaining > 0) {
                    setTimeout(() => setRemaining(remaining-1), 1000);
                } else if (remaining === 0) {
                    setRemaining('👻')
                }
            }, [remaining, setRemaining]);
            return remaining;
        };
        ReactDOM.render(React.createElement(Counter, null), document.getElementById('react-countdown'));
    }, 1000);
})()

Bookmarklets collection - Anthony Pena's Toolbox

Basics

Use cases