Bookmarlets
Remember bookmarlets? I've been collecting them for a bit and have a small collection. I don't know where they all came from, but I wrote a couple of them myself. I'll mark mine with a bug: 🐛. More to come!
Each item in this list will have a button at the bottom you can right click and bookmark using the context menu. Alternatively you can drag the link to your bookmark bar.
Usability Bookmarklets
Create a usable ToC for the current page
This is really useful for long pages that don't provide a visible table of contents while scrolling. Most websites will have a sticky ToC on the side of a long page, but a lot of them don't.
For those that don't, this will grab all the HTML headings on the page and generate a clickable table of contents that you can use to navigate the page with.
For whatever reason my static site generator does not like the javascript used in this bookmarklet and the template engine seems to be unable to deal with it. Thankfully the bookmarklet author has a site available here: ToC generation bookmarklet available at external link here
Prevent sites from disabling paste
Sometimes forms don't allow you to paste things from the clipboard. I think that is very rude.
Highlight Internal/External links
Sometimes it is helpful to know where a hyperlink might be taking you. Unless an author takes great care to make accessible links with descriptive text, it is often not possible to know whether or not a link will take you to an external site.
This bookmarklet will highlight internal and external links, so it is quickly apparent what might take you to an external website.
Highlight Internal/External Links
Create a link to specific text on the page 🐛
Sometimes you want to link someone to something specific on a page, but the page makes it a little difficult to do so. Maybe it doesn't have anchors for headings, or the page is very long. This bookmarklet is super useful and will create a link using a special find-in-page link syntax for text you have selected on the page.
When someone visits the link, they will go straight to the text you highlighted, and the browser will highlight the text for them.
To use this, first highlight some text on a page, then click the link!
Create Link to Specific page text
View current site in the wayback machine
Sometimes pages change and you want to go back in time to see an earlier version (if it exists). This will open the current page in the wayback machine at archive.org.
RSS
Grab a site's RSS feed link 🐛
Sometimes a feed link is hard to find. I don't use a feed reader that automatically finds a feed o a webpage so I need to find it myself.
This bookmarklet scans for a <link rel="alternate"> tag with the appropriate contents and alerts me with the result that I can copy.
Web Development
Find images missing the alt attribute
I use 11ty to generate this site and the build breaks if you are missing alt text, so this bookmarklet isn't something I regularly need. However, it might be useful to you!
This will highlight images in a dotted red border if they do not have an alt value.
Open the current page in the WAVE accessibility evaluator
It is important to check how you're doing on accessibility. It is easy to get wrong, and I often do.
This bookmarklet will open the current page in WAVE
Site Specific
Letterboxd: Show the character name next to the actor name 🐛
I watch a lot of movies, but I don't remember the names of actors very well. When I am looking at the cast page of a movie on letterboxd, I use this bookmarklet to re-arrange the cast list to show their character names alongside the actor.
Without this bookmarklet, I'd have to mouseover the actor name to get the character name and that is very annoying!