My Bookmarklets

My tiny collection of bookmarklets, both copyable and source. Moved here from my links page to better explain them. Hope you find something useful. None of the heading links work on the page. You have to drag them to your bookmark bar to use them.

Archive Version

See if the page was archived at some point by the Internet Archive. Please, if you use this, consider donating to them for the insane amount of charity they do for the web ecosystem. If you don't have the cash to spare, perhaps consider signing up for an account to browse their huge catalogue of online books.

window.location.href=`https://web.archive.org/web/*/${document.URL}`;

Border Debug

Show the box model of the page by putting a bright red border around everything. See that the nesting looks good and nothing's chunky or broken. This is super valuable for spotting inline elements inside block elements, or links with a click box that is bigger than the visible parts of the element. It also helps debug a wide variety of other CSS issues. This is by far the bookmarklet I use most.

document.querySelectorAll("*").forEach((elm, _) => {elm.style.boxShadow="0 0 0 1px red inset"});

Session Transplant

This copies all the cookies and local storage data from a page into the clipboard. It formats it so you can paste it into the console of some other profile, page, or browser. Effectively a way to "transplant" the state. It can't copy HttpOnly cookies (obviously), so it won't work on well secured sites. It's kind of an odd ball.

const node = document.createElement('textarea');
const selection = document.getSelection();

node.textContent = `
    document.cookie = ${JSON.stringify(document.cookie)};
    Object.assign(window.localStorage, ${JSON.stringify(window.localStorage)});
    location.reload();
`;

document.body.appendChild(node);

selection.removeAllRanges();
node.select();
document.execCommand('copy');

selection.removeAllRanges();
document.body.removeChild(node);
alert("Session Copied!");

List Globals

This lists all the global variables on the page. Super handy to start to understand a site's code and APIs. It just compares the globals of the page to that of a blank page. It then uses said blank page to list the unique global properties of the current page, one per line. It's also a great gauge of how clean the devs are being about state. You wouldn't believe all the junk you often find.

const newWindow = open();
const browserGlobals = new Set(Object.keys(newWindow.window));
Object.keys(window)
	.filter(key => !browserGlobals.has(key))
	.sort()
	.forEach(key => {newWindow.document.writeln(key + "<br>")});

URL++

Wardialing the URL continues to work to this day. Not perfect, not efficient, but a handy hammer when you spot a nail.

window.location = window.location.href.replace(/(\d+)/g, (_, n) => {parseInt(n) + 1});

Zap Images

This sets every <img> tag's src attribute to an empty string which should break most images on the page. This won't break CSS based images. This just helps catch issues around alt text and graceful degradation of the site.

document.querySelectorAll("img").forEach((elm, _) => {elm.src = ""});

Zap CSS

This disables all the CSS on the page. Both a graceful degradation test and super crude accessibility first pass. This helps catch a lot of insane sized images/SVGs, menu hells, and JS that assumes styles are working. It's not perfect. It doesn't catch CSS issues from assumed agent defaults or that "ancient" agents aren't left with a mess of half working styles. On the other hand, every bit helps.

[...document.styleSheets].forEach((sheet, _) => {sheet.disabled = true});