Directions and Reference Guide for Bookmarklet Generator Tool

Directions / Reference

How To Use this Tool

Type the javascript code into the editor box for the bookmarklet.

Click the Generate Bookmarklet button. This will format the javascript into a bookmarklet that can be added to your browser or a HTML page to publish the bookmarklet for future use.

Adding a Bookmarklet to the Browser

Drag & Drop Method

Dragging the bookmarklet link to the browser bookmark bar will add it to the browser.

Manual Method

After clicking the Generate Bookmarklet button, copy and paste the Bookmarklet HREF into the URL of a bookmark in the browser.

Editing an existing Bookmarklet

For bookmarklets generated with this tool, they can be loadeb back into the tool for future editing/changes.

At the end of the bookmarklet you'll find a javascript comment with a URL. Loading that URL will reopen this tool with your bookmarklet for editing, incrementing the version number, and re-generation.

Finding The Bookmarklet Edit Link

Right click on an existing bookmarklet and choose Edit. At the very end of the URL is a comment with a URL. Navigate to that URL to open the bookmarklet in edit mode.

NOTE: it may be easier to copy the bookmarklet URL into a text editor like Notepad to find the edit link as the code can get lengthy and is hard to read in the small textbox in the browser.

Include jQuery

Checking this box will include jQuery at the jQuery namespace if it isn't already present on the page.

Bookmarklet HTML

After clicking the Generate Bookmarklet button, HTML is output that can be used to generate a page of bookmarklets. This allows for sharing the HTML page with multiple bookmarklets.

Copy this block of HTML and publish it as needed.

Sample Bookmarklet HTML CSS

Below is sample CSS for styling a bookmarklet HTML page.

.bookmarklet-wrapper {
	background-color: #FEFFEA;
	padding: 1% 2%;
}

.bookmarklet-wrapper .content {
	display: block;
	padding-bottom: 15px;
}

.bookmarklet-wrapper .content .bookmarklet_button {
	background-color: #646464;
	padding: 1% 2%;
	border-radius: 5px;
	color: white;
	display: inline-block;
	margin-top: 10px;
}

.bookmarklet-wrapper .bookmarklet_button {
	text-decoration: none;
	display: inline-block;
}

Bonus Tip: Emojis

Add an emoji to the Bookmarklet Name by copying/pasting one into the name field. This makes it easier to identify which bookm is which.

Here is a complete list of emojis to pick from: Unicode Emoji Chart

Use the Bookmarklet Generator Tool