Skip to main content
On this page
On this page

Bookmarklets

Last updated: 6 Oct 2024 ·
Posted in wiki#notes

Source code for bookmarklets that I've written.

Copy Markdown link for current page

Cleans up the title a bit. If there is some selected text on the page, it will be copied after a >.

javascript: (() => {
  let link = `[${document.title}](${location.href})`.replace(/ - YouTube| - Wikipedia|GitHub - | \| Goodreads/, '');
  let sel = getSelection().toString();
  if (sel) link += ` > ${sel}`;
  navigator.clipboard.writeText(link);
})();

Copy HTML link for current page

javascript: (() => {
  let link = `<a href="${location.href}">${document.title}</a>`.replace(/ - YouTube| - Wikipedia|GitHub - | \| Goodreads/, '');
  navigator.clipboard.writeText(link);
})();

Google Translate

javascript: (() => {
  window.open(`https://translate.google.com/translate?langpair==auto|en&hl=en&u=${location.href}`);
})();

whois lookup for current domain

javascript: (() => {
  window.open(`https://who.is/whois/${location.hostname.split('.').splice(-2).join('.')}`);
})();

Search archive.org for current page

javascript: (() => {
  window.open(`https://web.archive.org/web/*/${location}`);
})();

Save current page to archive.org

javascript: (() => {
  window.open(`https://web.archive.org/save/${location.href}`);
})();

Search archive.today for current page

javascript: (() => {
  window.open(`https://archive.today/${location}`);
})();

Search HN for current domain

javascript: (() => {
  window.open(`https://hn.algolia.com/?query=${location.hostname}`);
})();

Search HN for current webpage

javascript: (() => {
  window.open(`https://hn.algolia.com/?query=${location.href.replace(/https?:\/\//, "")}`);
})();

Browse HN frontpage on a random date

javascript:(() => {
  const first = new Date('2007-02-19').getTime();
  const last = new Date().getTime();
  const rand = new Date(first + Math.random() * (last - first)).toISOString().split('T')[0];
  window.open(`https://news.ycombinator.com/front?day=${rand}`);
})();

View new comments on HN thread

javascript: (() => {
  const id = location.href.match(/\d+$/g)[0];
  window.open(`https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=story:${id}&sort=byDate&type=comment`);
})();

Edit any webpage

javascript: (() => {
  document.body.contentEditable = 'true';
  document.designMode='on';
})();

javascript: (() => {
  window.open(`https://duckduckgo.com/?q=qr ${location}`)
})();

Get QR code for text selected on the page

javascript: (() => {
  window.open(`https://duckduckgo.com/?q=qr ${getSelection()}`)
})();

Submit to HN

javascript:(() => {
  window.open(`https://news.ycombinator.com/submitlink?u=${location}&t=${document.title}`);
})();

Submit to Lobste.rs

javascript:(() => {
  window.open(`https://lobste.rs/stories/new?url=${location}&title=${document.title}`);
})();

Normalize font

For those stupid websites with tiny unreadable fonts. Changes font family to system-ui, font size and weight of paragraphs to 18px and 400 respectively.

javascript: (() => {
  let s = document.createElement('style');
  s.innerHTML = 'body,div,p,h1,h2,h3,h4,h5,h6 {font-family: system-ui !important;} p {font-size: 18px; font-weight: 400;}';
  document.body.appendChild(s);
})();

Go to source repo for a GitHub/GitLab Pages site

Do you ever come across some site hosted on GitHub Pages with a URL like https://user.github.io/repo and you look around but the link to the source repository is nowhere to be found?

This bookmarklet opens the source repo for such sites.

javascript: (() => {
  const [user, site, ...rest] = location.host.split('.');
  const repo = location.pathname.split('/')[1] || `${user}.${site}.io`;
  window.open(`https://${site}.com/${user}/${repo}`);
})();

IMDb list to Markdown list

For some time now, I have been maintaining my reading list using a JSON file, having shifted away from Goodreads. Likewise, I no longer use an IMDb account to keep track of my watchlist. I have exported all the data to my browser bookmarks.

Occasionally, I come across an IMDb list that I want to include in my library, but there is no convenient means to export it directly to my bookmarks. An obvious approach is to just drag each item into the toolbar, but you don't get any metadata like the release year or rating with that. Additionally, this is not practical for longer lists. On top of that, IMDb links are riddled with tracking parameters that require manual cleanup.

This bookmarklet parses the DOM to get the movie list in Markdown, and copies the list to the clipboard. It then shows a prompt asking whether or not to open pandoc.org/try. If clicked "OK", it opens up the pandoc online playground in a new tab where I paste the markdown, and get converted HTML which can be imported into my browser.

The playground also supports a permalink with query parameters to pre-populate the input and options, so there's no need to copy anything but since there is a limit to the URL size, it doesn't work for large lists.

javascript: (() => {
  let movies = '';
  let count = 0;
  document.querySelectorAll('.ipc-metadata-list-summary-item').forEach(item => {
    const title = item.querySelector('h3').innerText.replace(/^\d+\. /, '');
    const link = item
      .querySelector('a')
      .getAttribute('href')
      .replace(/\?ref.+/, '');
    let year = item.querySelector('.sc-ab348ad5-8');
    year = year ? ` (${year.innerText})` : '';
    let rating = item.querySelector('.ipc-rating-star--rating');
    rating = rating ? ` (Rating: ${rating.innerText})` : '';
    movies += `- [${title}${year}${rating}](https://www.imdb.com${link})\n`;
    count += 1;
  });

  navigator.clipboard
    .writeText(movies)
    .then(() => {
      if (confirm(`Copied markdown with ${count} movies. Open pandoc?`)) {
        window.open(
          `https://pandoc.org/try/?params={"from":"markdown","to":"html5","wrap":"none"}`
        );
      }
    })
    .catch(err => alert('Error copying text'));
})();

YouTube playlist to Markdown list

Same as above but for YouTube playlists.

javascript: (() => {
  let videos = "";
  let count = 0;
  document
    .querySelectorAll("#video-title.ytd-playlist-video-renderer")
    .forEach((v) => {
      title = v.getAttribute("title");
      link = v.getAttribute("href").replace(/\&list=.+$/, "");
      videos += `- [${title}](https://www.youtube.com${link})\n`;
      count += 1;
    });

  navigator.clipboard
    .writeText(videos)
    .then(() => {
      if (confirm(`Copied markdown with ${count} videos. Open pandoc?`)) {
        window.open(
          `https://pandoc.org/try/?params={"from":"markdown","to":"html5","wrap":"none"}`,
        );
      }
    })
    .catch((err) => alert("Error copying text"));
})();

Dictionary lookups

Look up the selected word/phrase in various online dictionaries. When activated, it shows a prompt asking to select a dictionary. Leave empty for default (Merriam-Webster). Append 't' for thesaurus versions.

Examples:

  • o: OALD
  • ct: Cambridge Thesaurus
  • ht: Chambers Thesaurus
javascript: (() => {
  let word = getSelection().toString().toLowerCase();
  let d = {
    m: "https://www.merriam-webster.com/dictionary/",
    mt: "https://www.merriam-webster.com/thesaurus/",
    o: "https://www.oxfordlearnersdictionaries.com/definition/english/",
    ot: "https://www.oxfordlearnersdictionaries.com/definition/english/",
    c: "https://dictionary.cambridge.org/dictionary/english/",
    ct: "https://dictionary.cambridge.org/thesaurus/",
    h: "https://chambers.co.uk/search/?title=21st&query=",
    ht: "https://chambers.co.uk/search/?title=thes&query=",
    w: "https://en.wiktionary.org/wiki/",
    wt: "https://en.wiktionary.org/wiki/Thesaurus:",
  };

  let c = window
    .prompt(
      "Choose a dictionary. Append 't' for thesaurus.\n\n" +
        "m: Merriam-Webster\n" +
        "o: Oxford Advanced Learner's Dictionary\n" +
        "c: Cambridge Dictionary\n" +
        "h: Chambers Dictionary\n" +
        "w: Wiktionary",
    )
    .toLowerCase();
  let t = c.endsWith("t") ? "t" : "";
  let url = c === "" ? d.m : c === "t" ? d.mt : d[c[0] + t] || d["m" + t];
  window.open(url + word);
})();

Instantly open an IMDb list for selected title

This uses Google's "I'm Feeling Lucky" feature. Can be modified for other sites by changing the site variable.

An example use case: Let's say I'm on Die Hard Wikipedia page and I want to see all films in the franchise and their ratings on IMDb, then I can simply select the title of the page and click the bookmarklet.

javascript:(() => {
  let t = getSelection().toString();
  let site = 'site:imdb.com/list' + ' ';
  window.open(`https://www.google.com/search?q=${site}${t}&btnI=I`);
})();