Saturday, January 4, 2025

Silly JavaScript Tricks

 ...or "Bookmark(let)s Are Your Friends"

Just a small collection of bookmarks and bookmarklets I created to make web browsing slightly more pleasant.

Fair warning: I speak Java, but not JavaScript. So fee free to laugh at my non-idiomatic code, or better yet, leave constructive comments. You're also welcome to copy, paste, modify, and share any of them. Just remember that most were intended to be quick-and-dirty solutions to problems that pestered me, which means they may fold, spindle, or mutilate any machine they run on. Think of them as week-old leftovers: they may still be delicious, or they may be growing green and black fuzzy critters. Or both.

What's a bookmarklet?

Glad you asked! A bookmarklet looks just like a normal bookmark, but instead of holding a URL (like https://thinkingc.app), it holds a snippet of JavaScript. When you click the bookmarklet, the JavaScript runs. So it's a bookmark that "does stuff," rather than just taking you to a website.

The ones below are formatted for readability. Your browser doesn't care about formatting, though, so while it's fine to either copy and paste them directly, I typically join everything into a single line. Your choice.

Bookmarks


As a Linux guy, I like to save all the things I get from the Web in the Downloads folder under my home directory. I'll often rename them, and if they're documents, I'll move them to a folder beneath Documents. A browser doesn't care whether a URL leads to a web site or a file or directory; it's happy either way. And a browser makes it easy to navigate the directory hierarchy when you don't need a full-blown file manager. It also happens to be a perfectly serviceable PDF viewer. That makes it easy to browse the product manuals, account statements, and other documents I've downloaded.

So I've created these two bookmarks and put them within easy reach in my bookmark bar:
  • file:///home/wireliss/Downloads
  • file:///home/wireliss/Documents
Now I can open either folder with a single click.

The three slashes after file: aren't typos. They're necessary because a URL is always formatted as scheme://authority/path... or, rarely, scheme:/path.... The scheme is usually something like https, and the authority is typically the web address of a host, like blogger.com. In the case of files we need the absolute path, which starts with a slash. So the first two slashes separate the scheme from the path, and the third slash is the beginning of the path itself. (My browser will let me omit the first two slashes when I type the URL, but it puts them back automatically.)


Bookmarklets


Auto-reload

My first attempt at a bookmarklet simply asks for a number of seconds, then reloads the current page at that interval, forever, or until you close the tab or navigate away. In retrospect it's far more complicated than it needs to be, but it did the job. It was a good first project.

javascript: t = 0;
while (t == 0) {
  t = prompt("Seconds: ")
}
if (t === null) {
  location.replace(location.href)
} else {
  c = location.href;
  setTimeout(reload, 1000 * t);
  function reload() {
    setTimeout(reload, 1000 * t);
    frm = '<frameset cols=\'*\'>\n<frame src=\'' +
      c + '\'/>';
    frm += '</frameset>';
    with(document) {
      write(frm);
      void (close())
    };
  }
}

Amazon link shortener

Has anyone ever sent you a link to a product on Amazon that seems to go on forever? You know, something like https://www.amazon.com/Product-Description-Goes-Here/dp/ASIN/ref=some_code?param=val&other_param=more_data&....

It turns out that most of that is totally unnecessary! A quick web search will show you that the only important parts are the ones in bold: amazon.com/dp/ASIN.

  • Of course, the domain is required: amazon.com. Your browser will add the scheme (https) and the w's for you.
  • The dp means this is the product's "detail page." Some pages use gp/aw/d or some other path instead, which you can change to dp. Apparently gp means "general product" and aw means "Amazon wireless," indicating that the page is optimized for mobile devices, but I can't find an authoritative reference for that.
  • The ASIN is Amazon's "standard identifier number," which uniquely identifies the product. Again, in retrospect, it might have been easier for the bookmarklet to search for a 10-character segment in the path.

And that's it! The bookmarklet will create the shortened link, navigate to it (so you'll be sure it works!), and copy it to your clipboard.

javascript: var short =
  location.toString()
    .replace(/www.amazon.com\/[^/]*\//, "amazon.com/")
    .replace("/aw/d/", "/dp/")
    .replace(/\/dp\/([^\/?]*).*/, "\/dp\/$1");
navigator.clipboard.writeText(short);
location = short;


No comments:

Post a Comment