Bookmarklet Generator - Instructions

A small utility for generating bookmarklets.

About Page

A browser bookmark, sometimes called a favourite, is a saved shortcut to a web page. When you create a bookmark, the browser stores a title and a URL so you can return to that page quickly from the bookmarks bar, bookmarks menu, or browser search.

Bookmarklets use the same browser feature, but instead of storing a normal https:// URL they store a javascript: URL. When you click the bookmarklet, the browser runs that JavaScript against the current page.

For more background and examples, read A Quick Intro To BookMarkLets.

This tool gives you a simple surface for creating and inspecting bookmarklet output.

Use it to practice:

  • input validation
  • generated output inspection
  • JavaScript URL encoding
  • copy and paste workflows
  • browser security and execution restrictions

The Useful Snippets Extension is a Chrome extension containing small JavaScript snippets for testing. The snippets run from a browser context menu and cover useful testing tasks such as checking accessibility issues, changing form validation attributes, inspecting links, and manipulating page content.

It relates directly to bookmarklets because both approaches package small browser-side JavaScript helpers for reuse. A snippet can often start life as console code, then become a bookmarklet, and later become part of a browser extension when you want easier access, grouping, or a right-click workflow.

Exploratory Testing

Create a few simple scripts, inspect the generated bookmarklet, and test whether the browser will execute it as expected.

Be careful when running generated bookmarklets against pages you do not control.

Practice Flow

Build a script in stages before turning it into a bookmarklet:

  1. Run JavaScript directly in the console.
  2. Wrap it in a named function and call the function.
  3. Wrap it in an anonymous function that runs immediately.
  4. Convert it to a javascript: URL.
  5. Generate the bookmarklet and inspect the generated href.

Example direct console script:

for (var x = 0; x < 100; x++) {
    console.log(x);
}

Wrapped as a callable function:

var t = function() {
    for (var x = 0; x < 100; x++) {
        console.log(x);
    }
};

t();

Wrapped as an immediately invoked function:

(function() {
    for (var x = 0; x < 100; x++) {
        console.log(x);
    }
})();

Bookmarklet form:

javascript:(function(){for(var x=0;x<100;x++){console.log(x);}})()

After generating, check whether the link text, href, encoding, and copied bookmark all match the JavaScript you intended to save.

Try It Against Simple TODO List

The Simple TODO List page exposes window.app, so it is a useful page for bookmarklet practice. Open /apps/simple-todo-list/todo.html#/&eviltester and first run the script in the console:

for (var x = 0; x < 10; x++) {
    app.addItem("bookmarklet todo ".concat(x));
}

Then wrap it as an immediately invoked function:

(function() {
    for (var x = 0; x < 10; x++) {
        app.addItem("bookmarklet todo ".concat(x));
    }
})();

Then generate the bookmarklet:

javascript:(function(){for(var x=0;x<10;x++){app.addItem("bookmarklet todo ".concat(x));}})()

Other useful Simple TODO bookmarklet ideas:

  • delete all completed todos with app.removeCompletedItems()
  • create a known set of setup data before a test session
  • mark alternating items completed by reading app.read(...) and calling app.toggleComplete(...)
  • clean the current list after an exploratory testing session