A bookmarklet guide

Introduction

Bookmarklets are "Bookmarks" (Chrome, Firefox) or "Favorites" (Internet Explorer/Edge).

In contrast to regular bookmarks they will not lead you directly to another page. Instead they will execute a script on the current website.

Are bookmarklets dangerous?

A bookmarklet can do everything in a page that a developer can accomplish with JavaScript. It will be executed within your session as if yourself were doing it. So when you're logged in to a system, the script is as well.

So bookmarklets can actually be dangerous.

Never use a bookmarklet that you did not create by yourself (or if you have the slightest doubt in the person recommending a bookmarklet to you).

What's a bookmarklet technically

A bookmark that instead of an URL (starting with http://...) contains a Script starting with "javascript:"

For example: javascript:alert(document.title);

A bookmarklet can utilize everything on the page by using JavaScript.

What is it good for?

Advanced bookmarklets may download code and run little applications on your website.
But since bookmarklets are potentially dangerous I would refrain from using such advanced bookmarklets offered by someone unknown.

Personal use

• Use the current URL, send a query to a QR Code service and show the QR code. So you can easily open the website from your computer on your smartphone by scanning the QR code.
• Remove elements of a page you visit regularly, that annoy you. E.g. "premium" content teasers that you would need to pay for.
• Remove ads from articles for a clean reading experience
• Shop for cheap: Remove products from a shop listing that are not reduced at least 50%.
• ...

Business / Development / Testing use

• In an online-shop: open a list of categories and read out how many products it lists. Output a list in a new window
• Demo image quality differences: Replace image URLs in a page with equal (local or parameterized) images that showcase different compression levels.
• To get quicker approvals: Showcase UI/UX changes by modifying the HTML structure.
• Find HTML-Comments for e.g. render time or publish date or technical identifiers and show them in an alert.
• Find inline Javascript/CSS and show it in a table.
• Find tracking data and show it in a table.
• ...

How to use the bookmarklet generator?

Enable your boomark bar. In Chrome it's Ctrl+Shift+B.

First: have a javascript snippet at hand. It must be executable on the browser console without errors and show the desired results.

Remove all comments from the code if you have any. Take care that every line is closed with a semicolon.

Second: open bookmarklet generator

Copy your JavaScript snippet into the text box, also give your Bookmarklet a name (this will show in your bookmarks)

A button to your right shows your Bookmarklet name. Press it and it will execute on the generator's page. Drag & Drop it to your Bookmark bar.