JS Bookmark(let)s

JavaScript snippets can be saved as bookmarks that execute code on the current page.

What Are JavaScript Bookmarks?

You already know what bookmarks are. You might be surprised to learn you can save JavaScript instead of a regular URL. These are called bookmarklets. They run tiny programs in your browser.

Instead of a normal link like https://kingchill.com, your bookmark URL starts with javascript: followed by the code you want to run. If you’re a programmer, you may understand the utility of performing a command based on which website you’re currently visiting (location.hostname || location.href), the time of day, local storage and more.

---

Bookmarklet Examples

1. Highlight All Links

javascript:(function(){
  document.querySelectorAll('a').forEach(el => el.style.backgroundColor = 'yellow');
})();

Use this when reading an article to quickly see where all the links are.

2. Toggle Dark Mode

javascript:(function(){
  document.body.style.background = document.body.style.background === 'black' ? 'white' : 'black';
  document.body.style.color = document.body.style.color === 'white' ? 'black' : 'white';
})();

Works great for sites without a built-in dark mode.

3. Redirect Based on Time of Day

javascript:(function(){
  const hour = new Date().getHours();
  if (hour < 12) {
    location.href = 'https://www.thefp.com';
  } else {
    location.href = 'https://kingchill.com';
  }
})();

Morning links vs. afternoon distractions.

4. Quick Account Switch (Google)

javascript:(function(){
  if (document.cookie.includes('ACCOUNT_CHOOSER')) {
    location.href = 'https://mail.google.com';
  } else {
    location.href = 'https://accounts.google.com/Logout';
  }
})();

Not 100% reliable, but can help when switching between Google accounts.

5. Respond to Prompt

javascript:(function(){
  const query = prompt("Search Wikipedia for:");
  if (query) window.open(`https://en.wikipedia.org/wiki/${encodeURIComponent(query)}`);
})();

This allows users to search Wikipedia directly from any page.

---

Tips & Best Practices

• Start with javascript: — That's how the browser knows it's code.

• Wrap your code in an IIFE — That means an Immediately Invoked Function Expression: (function(){ /* your code */ })();

• Minify if it's long — Some browsers limit bookmark length.

• Save your code elsewhere — If you reinstall or sync goes wrong, your bookmarklets can be lost. Keep a backup in a local .js file or a GitHub gist.

• Test in the console first — If it works in DevTools, it should work in your bookmark.

• Some pages block scripts — Due to CSP (Content Security Policy), bookmarklets won’t run on every site.

---

Feel free to comment with any examples you use to improve productivity!