Bookmarklets

Bookmarklets have been out of fashion for a while now. I’ve relied on them for years but only just made the connection that I can roll my own for prepend services^[1] like 12ft.io or Cooked. Here’s how, using Cooked as an example.

How

1. Get the prepend service’s URL handy. For Cooked, it’s https://cooked.wiki/
2. Add it to the following JavaScript snippet in place of baseUrl’s value:

const baseUrl = "https://cooked.wiki/";
const currentUrl = encodeURI(window.location.href);
window.location.href = baseUrl + currentUrl;

3. Paste that JavaScript into a bookmarklet maker like this one.
4. Drag-and-drop the resulting bookmarklet to your browser’s bookmarks bar.

More examples

Here are some that I use often. You can drag any of these to your bookmarks bar if you’d like to use them yourself.

• Kill Sticky removes all position: fixed; elements from view. I.e. it gets rid of annoying overlays and pop-ups.
• Pinterest It scours the current page for images and prepares them for pinning to your Pinterest account.
• Cook It uses the Cooked service to formats recipe webpages nicely. Cooked removes all the preamble, upsells, and so on.
• Save to Pocket does exactly that.
• Jump 12ft uses the 12ft.io service to get past the occasional paywall.
• Sample Type uses the Type Sample service to inspect and toy with font assets on the current page.

Keyboard shortcuts

I use the Pinterest one a lot so I made a keyboard shortcut for it. Here’s how to do that on macOS for Safari bookmarklets:

1. Open System Settings -> Keyboard -> Keyboard Shortcuts -> App Shortcuts
2. Add a new item for Safari.
3. Enter the exact same name as the bookmarklet in Safari.

My Pinterest it keyboard shortcut is ⌥⇧⌘P.

Credits

I used Max Masnick’s work-around to fix Pocket’s broken bookmarklet for Safari on the same day Jeffrey Zeldman linked to Cooked. These two connected the dots for me.