Chris's Wiki :: blog/web/FirefoxBookmarkletButtonsNotes

Some brief notes on turning Firefox bookmarklets into convenient buttons

July 3, 2021

Yesterday when I talked about dealing with CSS fixed elements in Firefox I mentioned that one of the good looking solutions was Martin Tournoij's bookmarklet but that I lacked a good way to get access to bookmarklets because I don't use Firefox bookmarks and so don't have the bookmarks toolbar displayed. Today, after various poking around, I found out how to do this in my setup, which was partly difficult because Firefox sometimes hides one of the title bar and URL bar customization options.

First, what appears on the Firefox Bookmarks toolbar is mostly what's in the special "Bookmarks Toolbar" folder of your bookmarks (Firefox will add an "Other Bookmarks" menu at the end). You can't rename this folder and make a new version with all new contents; instead you have to make a new folder (say "Original Bookmarks Toolbar") and then move your current Bookmarks Toolbar contents to it one by one. This new folder has to go in either "Other Bookmarks" or "Bookmarks Menu". Once you've emptied out the Bookmarks Toolbar special folder, you can add bookmarklets to it and have them be the only thing in the Bookmarks toolbar. This is not particularly useful by itself unless you want an entire line of precious vertical content to always be consumed.

To make bookmarklets into almost buttons, you first should give them very short names (single letters are good). Then, you can add the entire Bookmarks Toolbar to the titlebar area, but it may be a little tricky. You get access to title bar customization by right click → "Customize toolbar...", but the Bookmarks toolbar doesn't appear as a customization element if you have it set to "Never show". Instead you need to set it to "Only show in new tab", at which point it will show up at the top (above "Drag your favorite items into the toolbar or overflow menu"). Now you can drag it to the titlebar, which will make the "Bookmarks Toolbar" entries for your bookmarklets show up in the titlebar once you exit customization and are on regular pages.

The "Bookmarks Toolbar" entries show as both a little globe icon and their title (which is why single letters are good, since they take only a bit of space). As far as I know there's no way to make the globe icon go away, and so bookmarklet buttons always take a bit more space than regular customization icons.

This is probably obvious, but clicking on the bookmarklet will invoke it; it's not a toggle. If you want to revert the effects of a bookmarklet like Martin Tournoij's, you need to refresh the page. With much more effort you could probably write an invertible bookmarklet, but I'm lazy (and also I don't know either Javascript or the modern browser DOM APIs, or for that matter if there's any easy way to go from nicely written out Javascript to something encoded ready to be a bookmarklet).

PS: I am already enjoying my new 'f' bookmarklet to make fixed position elements into regular ones. It's so convenient to just zap all the irritating headers away with a click. Maybe someday it'll have problems with sites that set a strict CSP, but not so far. For sites I visit regularly, I'm going to keep using Stylus styles because then they're applied automatically on the site (assuming the site is one that doesn't change its HTML around all the time).

Comments on this page:

By Mike at 2021-12-25 04:39:18:

I've also been using those "cleanup page" bookmarklets recently, after picking up the idea from here, and really like them. Thanks!

As far as I know there's no way to make the globe icon go away, and so bookmarklet buttons always take a bit more space than regular customization icons.

You can make it go away quite easily:

- In your FF profile dir, create/edit "chrome/userChrome.css".

- Add a line there:
 toolbarbutton.bookmark-item image { display: none !important; }
- Might need "toolkit.legacyUserProfileCustomizations.stylesheets" set to true in about:config to work, but might be default too.

- Save, restart FF, no globes.

How to know the "toolbarbutton.bookmark-item image" magic-path - F12, F1 (settings there), enable last two checkboxes under "Advanced" (chrome/addon and remote debugging), then run "Browser Toolbox" window from "More Tools" in hamburger menu, it'll allow you to inspect/tweak/debug FF UI as if it was an HTML page itself.

Maybe someday it'll have problems with sites that set a strict CSP, but not so far.

Don't think that should be a problem, as WebExt has tabs.executeScript() which can always be used to run custom JS in some tab.

And when trying to bind these bookmarklets to Alt-F1, Alt-F2, ... keys, that's how I ended up running them all, which pretty sure is not under any risk of deprecation or brokenness.

If you use keyboard a lot too, can recommend putting such "fixed element zapper" stuff onto a keybind - much easier than hunting small button with a pointer.

By Colby at 2023-10-21 17:20:33:

I'm just seeing this post. Here's my bookmarklets workflow, which you may find helpful (bookmarklets are accessible by keyboard using this method, rather than needing activation by mouse click). Here's the setup:

Make sure that you consistently tag your bookmarklets as such (using Firefox's built-in bookmark tagging, picking a name of your choice, but know that the first letter of the name you choose will matter—I use "xlets", which makes for the letter X having special significance using this workflow)

Open Firefox's bookmarks manager

Locate the tag you're using to tag bookmarklets in the sidebar of the bookmarks manager window

Right click it and select "Copy"

Navigate to the Bookmarks Menu folder (which should be listed under "All Bookmarks")

Paste it

Now when you want to activate a bookmarklet using the keyboard (assuming you're not on Mac, which doesn't support CUA-style accesskeys for the menubar), press Alt+B, then the first letter of the tag you used (e.g. "x"), then the first letter of the name of the bookmarklet you'd like to activate.

Because you're not displaying the bookmarklets on the screen at all times so you can quickly access them by mouse, you can afford to give them fully descriptive names, so long as you discriminate about the first letter of the first word in the description to avoid collisions.

To give a real world example, when I want to activate the "Kill stick headers" bookmarklet (<https://alisdair.mcdiarmid.org/kill-sticky-headers/>), that's filed under "Kill Sticky", tagged appropriately as "xlet", and activated by Alt+B X K (which works out by accident to be especially easy on Dvorak keyboards since those letters are all next to each other—in (reverse) order, even).

Have fun.

By Colby at 2023-10-26 16:50:09:

PS: You can also activate bookmarklets using the keyboard in Firefox if you set a "keyword". Depending on how you add the bookmarklet, you may not be able to do this at the time of creation—it may require first adding it to the bookmarks, then either locating and editing it in the Bookmarks Manager or right-clicking the bookmarklet where you see it to edit with the context menu—at which point there should be a "Keyword" input field.

Written on 03 July 2021.

«	Dealing with CSS fixed position headers and footers in Firefox

Two ways to have Amanda always make full backups of a filesystem