Bookmarklet

Sections: What the heck is a bookmarklet? | Installing | Using The Bookmarklet | Bookmarklet Icon? | Limitations

The Printliminator Bookmarklet

What the heck is a bookmarklet?

Wikipedia defines a bookmarklet as:

Unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page... they add one-click functions to a browser or web page.

which is to say, it is a bookmark that you save to your favorites bookmark folder & use to do something to the page you are visiting, like remove sections that you don't want to print.

The Printliminator was originally developed to be used as a bookmarklet, and works perfectly well on most websites.

Since there are limitations on the size of a bookmarklet, The Printliminator loads in a javascript file with all the important bits. This makes it really easy to update and/or fix bugs and not force users to update their bookmarklet.

Sadly, bookmarklets have limited usefulness. In recent years, some websites have increased their security, which is a good thing, and implemented a Content Security Policy which blocks the loading of scripts from outside sources. This helps them keep hackers at bay, but it also prevents our little bookmarklet from working. So if you click on The Printliminator bookmarklet and nothing happens, that might be the reason why. You can double check by pressing F12 after making sure the browser has focus, then open the "Console" tab to look for any error messages. You might see something like this:

Refused to load the script 'https://css-tricks.github.io/The-Printliminator/printliminator.min.js' because it violates the following Content Security Policy directive...

If that is the case, then you can try The Printliminator browser extension/addon.

Installing

To install The Printliminator bookmarklet, simply visit this page: https://css-tricks.github.io/The-Printliminator/

And drag the "Printliminator" button into your bookmarks bar or folder.

Using The Bookmarklet

There are minor differences between the bookmarklet version & browser extension versions of The Printliminator.

• Because the bookmarklet popup window is always visible, it has been made draggable.
  • Press & hold the mouse over the ☰ icon (the 3 bars in the upper left corner; aka the hamburger). It's next to the words "DRAG")
  • Then move popup window wherever you want.
• Also because the popup is always visible, a close button has been included in the upper right corner.

The functionality of the popup is pretty much exactly the same as the extension.

For more details on using The Printliminator, see the Using wiki page for details.

Note: of all the actions mentions on that page, only the messages are not available with the bookmarklet.

Bookmarklet Icon?

If you want to include an icon with your bookmarklet:

• First save the bookmark.html file to your desktop.

• Then import the "bookmark.html" file into your Bookmarks bar, as follows:

• Chrome:

  • Go to the Bookmark Manager (Ctrl + Shift + o in Windows) or enter chrome://bookmarks/ in the omnibox.
  • Open the "Organize" dropdown menu.
  • Select "Import bookmarks from HTML file..."
  • Find & open the "bookmark.html" file.
  • The bookmarklet is now in the "Imported" folder, drag & drop it in the location of your choice.
  • Delete the "Imported" folder, if empty.

• Firefox:

  • Open the Bookmarks (Ctrl + Shift + b in Windows).
  • Select "Show All Bookmarks" or "Bookmarks Toolbar".
  • Select "Import and Backup" then "Import Bookmarks from HTML..."
  • Find & open the "bookmark.html" file.
  • Now look directly under "Bookmarks Menu" or under "Recently Bookmarked" for "The Printliminator" bookmark. Drag & drop it in the location of your choice.

• Opera:

  • Sorry, the following method does NOT appear to save the icon image 😿
  • The steps below describe how to import bookmarks into Opera, so left here for prosperity
  • Open settings (Alt + P in Windows).
  • Find and click the "Import bookmarks and settings..." button.
  • Select "Bookmarks HTML file" in the dropdown & click on "Choose file".
  • Find & open the "bookmark.html" file.
  • Now open the Bookmarks (Ctrl + Shift + b in Windows), or reopen to make it update.
  • Look under "Imported bookmarks" you'll find a "Imported" subfolder which contains the bookmarklet, drag & drop it in the location of your choice.

• Safari:

  • To be added.

Limitations

As mentioned above, because of Content Security Policy restrictions, some sites will not load the external script needed to make The Printliminator work.

If you really want to modify a page prior to printing, try out the browser extension (if it is available).

Or, as a last resort, elements can be manually removed using the developer tools/inspector:

• To open the developer tools/inspector, most browsers will open a panel when F12 is pressed, or right-click on the element and choose "Inspect element".
• Find the element by hovering over the different elements until the one you want to remove is highlighted in the main window.
• To remove:
  • Click to select, then press the keyboard Delete key.
  • Or, right-click on the element tag (e.g. <div class="container">...</div>), then select "Delete" from the context menu.
• Repeat as desired.