Bookmarklets

Basics

Bookmarklets are javascript: URIs, generally looking something like the following:

javascript:(function () {
    /* Your code here */
})()

Here’s a super basic bookmarklet:

javascript:window.alert("Hello!");

That’ll just make an alert saying “Hello!”. To actually add this to your bookmarks toolbar, you can do one of three things:

1. Add a new bookmark manually
2. Drag a link of the bookmarklet to your toolbar
3. Edit the URL of an existing bookmark

Only the third way seems to work on mobile devices. As of 2024-02-11, I’ve confirmed it works on Firefox for Android and Safari on an iPad (but it seems like Apple might censor this functionality in third-party browsers).

javascript:window.alert(`The URL of this page is: ${window.location}`)

To use a bookmarklet, click the bookmark in your toolbar. Or, if you’ve given it a keyword, type the keyword.

Examples

Here are some example bookmarklets:

• Kill Sticky V2

  javascript:(() => {
      function jmmKillSticky() {
  	const posTypes = new Set(['fixed', 'sticky']);
  	const fixedElements = Array.from(document.querySelectorAll("body *")).filter(el => posTypes.has(getComputedStyle(el).position));
  	fixedElements.forEach(el => { el.remove(); });
  	window.alert(`jmm.io killsticky removed ${fixedElements.length} elements`);
      };
      setTimeout(jmmKillSticky);
      /* jmm.io killsticky v2: Last modified: 2024-02-11 */
  })()

  This bookmarklet removes any element that has a fixed or sticky position. Great for removing annoying banners that take up too much vertical space.

• Text→AAAA

  javascript:(() => {
      function jmmTextToScream() {
  	function replaceNonwhitespace(char) {
  	    const textnodes = Array.from(document.querySelectorAll("*"), el => Array.from(el.childNodes).filter(x => x.nodeType === Node.TEXT_NODE)).flat();
  	    textnodes.forEach(x => { x.data = x.data.replace(/\S+/ig, match => char.repeat(match.length)); });
  	}
  	replaceNonwhitespace("A");
      }
      setTimeout(jmmTextToScream);
      /* jmm.io text→scream */
  })()

  This non-useful bookmarklet replaces all text nodes with an equivalent length scream, consisting of a capital letter A (repeated, of course). Doesn’t work for pseudo-elements (e.g. “::before” or “::after”) where text uses a CSS content: rule. See /getalltextnodes for how this works.

• Redact regex

  javascript:(()=>{
      function jmmRedactRegex() {
  	const pattern = window.prompt(`Enter a regexp or word to redact (e.g. "hello" or "[0-9]+")`);
  	const regex = new RegExp(pattern, "ig");
  	const textnodes = Array.from(document.querySelectorAll("*"), el => Array.from(el.childNodes).filter(x => x.nodeType === Node.TEXT_NODE)).flat();
  	let counter = 0;
  	textnodes.forEach(x => { x.data = x.data.replace(regex, match => (counter++, "█".repeat(match.length))); });
  	window.alert(`Redacted ${counter} ${(new Intl.PluralRules("en-US")).select(counter) === "one" ? "match" : "matches"}`);
  	window.counter = counter;
      }
      setTimeout(jmmRedactRegex);
  /* jmm.io redact regex 2024-02-11 */
  })()

  This bookmarklet prompts for a (case-insensitive) regex and replaces all matches with an equivalent length black bar. If the length of the content redacted is sensitive, you should use something else.

• DOM serializer

  javascript:(() => {
      function jmmSerializeDOM() {
  	const serializer = new XMLSerializer();
  	const str = serializer.serializeToString(document.documentElement);
  	if(str)
  	    jmmSaveTextFile(str, window.prompt(`Save serialized DOM as (e.g. "something.txt"):`));
  	function jmmSaveTextFile (text, filename) {
  	    const f = new File([text], filename, { type: "text/plain" });
  	    const url = URL.createObjectURL(f);
  	    const ael = document.createElement("a");
  	    ael.href = url;
  	    ael.download = filename;
  	    ael.textContent = "Download";
  	    document.body.append(ael);
  	    ael.click();
  	    ael.remove();
  	    URL.revokeObjectURL(url);
  	}
      }
      setTimeout(jmmSerializeDOM);
      /* jmm.io DOM serializer 2024-02-11 */
  })()

  Serialize the document and save it.

• Reveal Links

  javascript:(()=>{
      function jmmRevealLinks() {
  	const links = Array.from(document.querySelectorAll(":link"));
  	links.forEach(el => { el.replaceChildren(el.href) });
      };
      setTimeout(jmmRevealLinks);
  })()

  Replace links with their hrefs. Makes it easier to see where you’re going.

• Links Only

  javascript:(()=>{
  function jmmOnlyLinksGrouped() {
      const links = Array.from(document.querySelectorAll(":link"));
      function rep(tag, ...rest) {
  	const el = document.createElement(tag);
  	el.replaceChildren(...rest);
  	return el;
      }
      const grouped = Map.groupBy(links.map(jmmMakeLink), x => x.origin);
      document.body.replaceChildren(...Array.from(grouped, jmmMakeGroup));
      [...document.styleSheets].forEach(c => { c.disabled = true; });
      function jmmMakeLink(el) {
  	const ael = rep("a", el.textContent || "(Empty)");
  	ael.href = el.href;
  	return { origin: (new URL(el.href))?.origin, newel: rep("div", rep("dt", ael), rep("dd", el.href)) }
      }
      function jmmMakeGroup([k, v]) {
  	return rep("dl", rep("dt", k), rep("dd", ...v.map(x => x.newel)));
      }
  };
      setTimeout(jmmOnlyLinksGrouped);
      /* jmm.io only show links grouped 2024-02-11 */
  })()

  Shows page with all links, grouped by origin. Possibly handy for cybersurfing.

  And here’s another version that groups identical URLs:

  Link Groups 2

  javascript:(()=>{
  function jmmLinkGroups2() {
      const links = Array.from(document.querySelectorAll(":link"));
      function rep(tag, ...rest) {
  	const el = document.createElement(tag);
  	el.replaceChildren(...rest);
  	return el;
      }
      function groupMapFlat(arr, keyfn, mapfn) {
  	return Array.from(Map.groupBy(arr, keyfn), mapfn).flat();
      }
      document.body.replaceChildren(...groupMapFlat(links.map(jmmMakeLink), x => x.origin, jmmMakeGroup));
      [...document.styleSheets].forEach(c => { c.disabled = true; });
      function jmmMakeLink(el) {
  	const ael = rep("a", el.textContent || "(Empty)");
  	ael.href = el.href;
  	return { origin: (new URL(el.href))?.origin, href: el.href, a: ael};
      }
      function jmmMakeGroup([k, v]) {
  	return rep("dl", rep("dt", k), rep("dd", rep("dl", ...groupMapFlat(v, x => x.href, jmmMakeGroup2))));
      }
      function jmmMakeGroup2([url, links]) {
  	return [...links.map(x => rep("dt", x.a)), rep("dd", url)];
      }
  };
      setTimeout(jmmLinkGroups2);
      /* jmm.io Link Groups 2 2024-02-11 */
  })()

• No Media

  javascript:(() => {
      function jmmNoMedia() {
  	const mediaTypes = ['audio', 'video', 'img', 'picture'];
  	let counter = 0;
  	mediaTypes.flatMap(x => [...document.querySelectorAll(x)])
  	    .forEach(x => {
  		counter++;
  		x.remove();
  	    });
  	window.alert(`Removed ${counter} element${(new Intl.PluralRules("en-US")).select(counter) === "one" ? "" : "s"}`);
      };
      setTimeout(jmmNoMedia);
      /* jmm.io No Media 2024-02-11 */
  })()

  Removes media elements like audio, video, and images. Doesn’t work for background images.

Issues

javascript:window.alert("Hello!");

javascript:(()=>{setTimeout(()=>{window.alert("Hello!");});})()

javascript:setTimeout(()=>{window.alert("Hello");},0);