Marty McGuire

Posts Tagged bookmarklets

Tue May 23

Scratching an itch dot io

I'm back again with a blog post that is almost entirely just for me to remember a thing that I did! is a site full of great games (video and otherwise!), assets to make games, and digital art of all kinds.

Over the last few years I have been especially drawn in by the bundles, particularly the charity fundraising variety. For these bundles, dozens (sometimes more than a hundred?) creators will offer up their content so that all proceeds from buying the bundle goes towards a worthy cause.

For example, the recent Türkiye & Syria Earthquake Relief Mega Bundle had 203 items from 135 creators, with a minimum contribution of $10. That's ridiculously affordable even after bumping it up by my mental multipliers for charitable giving.

Between fundraisers and sales bundles I now have quite a few of these amounting to hundreds (thousands?) of items. It turns out that I find sifting through all this stuff to be surprisingly difficult in the interface. Until you actually download an item from a bundle, it doesn't appear in your overall library. You can browse each bundle page by page, 30 items at a time, or search within a bundle if you know exactly what you're looking for.

Screenshot of the TTRPGs for Trans Rights in Florida bundle first page of 17. It shows info about the bundle and the top two items, Wanderhome and FIST: Ultra Edition

However, I don't know what I'm looking for, and browsing this way feels pretty bad to me.

The part where I talk about a thing I did

Thanks to lots of help from my bookmarklets toolset and Firefox dev tools, I put together a bookmarklet that will extract the metadata (name, author, image and item page urls, ...) from all items on a given bundle download page and copy it to the clipboard as a partial JSON array.

Here's a GitHub gist of the bundle page JSON bookmarklet, which also contains the prettified Javascript if you want to see how it works.

For each bundle I opened a new .json file in my editor and proceeded to page through the bundle, using the bookmarklet to copy the data for the visible page, then paste it into the JSON file, and repeat until done. This part was not very much fun, but it wasn't too time consuming.

Now I have a couple of dozen .json files describing the contents of all the bundles I've purchased on Hooray!

As a quick does-this-work test, I added them to my personal notes site, which is powered by Hugo. I dropped the .json files into a data/itch/bundles/ folder, then made a corresponding Markdown file in content/itch/bundles/ to match. I added a new layouts/itch/single.html file that pulls the info from .Site.Data.itch.bundles and displays it.

Screenshot of the TTRPGs for Trans Rights in Florida bundle in my notes site. Top entries are shown for Wanderhome and FIST: Ultra Edition

The part where I talk about next steps

Now I can scroll through an entire bundle's content on one page, rather than paging through 30 at a time! This is... not actually that useful. However, the main win here is that with a pile of .json files I can start to do more interesting things like organizing all these items across bundles. De-duplicating, sorting, tagging, and more.

This is also me opening the door to other personal meta projects. For example, they have a "collections" system that I'd love to have syndicated into my personal bookmarks. Each project/game/whatever on also has a blog available, and lets you Like these posts. It'd be nice to have those syndicate to my website, too!

A little "bookmarklets toolset"

Browser bookmarks can run little bits of javascript on the current page if you use a "javascript:" URL. Folks often refer to these as "bookmarklets". (I wish they worked well in mobile browsers like iOS Safari, but that's a rant...)

Constructing scripts in a URL-safe format can be super frustrating! But today I expanded my "dev tools" for building bookmarklets:

The Firefox dev tools console is a great way to try out your code in-place on the actual page where you want to run it. Press "Ctrl+b" (or "Cmd+b" if you are a Mac person) and the console editor goes into multiline mode! This makes it much easier to edit little scripts! In multiline mode, you "submit" by pressing "Ctrl+Enter" (or "Cmd+Enter" etc).

Duckduckgo has a built-in tool for Javascript beautifying and minifying! It pops up when you search duckduckgo for "javascript minifier". This makes it easy to go from a readable script with newlines and other formatting in your console, to a minimized compact scriptlet suitable for a bookmarklet. Even better, it lets you go back and forth between a minimized script and a readable one so you can tweak your bookmarklets in the future.

Finally, and in some ways most importantly, bookmarklets need to be properly URL-encoded. Enter Marek Gibney's Bookmarklet Editor, which uses a single textarea and lets you convert between a script and its encoded "javascript:..." version.

The minifier/beautifier and bookmarklet editor are web tools, so the usual caveats apply about data privacy. In theory they are running purely in your browser and not sending data anywhere. But they could! So keep that in your threat model.