How to Code a Javascript Bookmarklet 📑

How to Create a Javascript Bookmarklet

Creating a Javascript bookmarklet is rather easy. If you don't know Javascript at all it won't be easy, but the difference between regular Javascript code and a bookmarklet is you don't have to own the website you are going to run the Javascript bookmarklet code on.

This is fantastic and exciting news because it means through the use of bookmarklets, we can vastly modify and turbocharge how any website or web page behaves and operates. In a sense, a Javascript bookmarklet is hacking the web with Javascript.

The Difference Between Javascript and a Javascript Bookmarklet

1. The Javascript code for a bookmarklet has to start with javascript:. This is because a bookmarklet is being execute through the web browser so by putting javascript: at the beginning we are telling the web browser 'the following is Javascript code'.
2. The Javascript bookmarklet code should be wrapped with the following code
   javascript:(function() {// your script here.}());.

The Code Syntax of a Javascript Bookmarklet

All you have to do is write your Javascript code in the part that reads // your script here.

When you have completed your bookmarklet script code, you should make it so all of the Javascript bookmarket code resides on a single line.

Two Ways to Run a Javascript Bookmarklet

The 2 main ways to run a Javascript bookmarklet ...

• Paste the bookmarklet code into the web browsers address bar and press the ENTER key on your keyboard.
• Save the Javascript bookmarklet to your web browsers bookmarks bar. Anytime you want to run the code just click the saved bookmark.

How to Save your Javascript Bookmarklet to your Web Browser Bookmarks

After you have created the Javascript bookmarklet code, you can save it to your web browser bookmarks so all you have to do is click the bookmark when you are on the web page where you wish to run the Javascript code that is the bookmarklet.

The instructions for creating a bookmark in your web browser varies slightly from browser to browser. The following instructions will save your Javascript bookmarklet to the Google Chrome bookmarks. You want to first create the bookmark, then edit the bookmark.

① Convert Multiple Lines Javascript to One Line

If you intend on pasting your Javascript bookmarklet code into a web browsers address bar to execute the code or just for simplicity, you can use the tool below to convert your multiple lines of Javascript code to one line of code.

② Create the Bookmark

Open a new tab in your web browser, then ...

1. Click the star icon ✰ on the very right hand side of the browsers address bar.
2. Give your Javascript bookmarklet a meaningful name so your memory will be triggered as to what the bookmarklet code does.
3. Select the folder where you wish to save the bookmarklet. The most convenient place is probably the bookmarks bar.
4. Click the More... button which will open up the EDIT BOOKMARK dialog box so you can now edit the bookmark by inserting the Javascript bookmarklet code.

Save Javascript Bookmarklet to Browser Bookmarks

Save Javascript Bookmarklet to Browser Bookmarks

③ Edit the Bookmark

1. In the EDIT BOOKMARK dialog box, where it says New Tab, give your JavaScript bookmarklet a meaningful name so in the future the name will trigger, in your memory, what this bookmarklet does when clicked.
2. In the URL text box paste all of the JavaScript code that makes up your bookmarklet.
3. Select or change where you wish to save this bookmarklet within your bookmarks.
4. Click the Save button. Your newly created JavaScript bookmarklet is now saved. All you have to do is when you were at a web page where you want to execute the JavaScript code, click on the bookmarklet.

Replace Bookmark URL with Javascript Bookmarklet Code

Replace Bookmark URL with Javascript Bookmarklet Code

Chrome Javascript Bookmarklet not Working

If you try to run a bookmarklet in the Google Chrome web browser by pasting the bookmarklet code in the address bar and press enter, the code does not work. Why? Simple. As a security measure, Chrome automatically removes the javascript: part of the bookmarklet code, at the beginning when it is pasted into the Chrome address bar.

To correct this, after pasting your Javascript bookmarklet into the Chrome browser address bar ...

1. Press the HOME key on your keyboard to bring the caret to the beginning of the address bar.
2. Type in javascript:.
3. Press the END key on your keyboard to move the caret to the end of the code that is now in the web browser address bar.
4. Press the ENTER key on your keyboard. This will execute and run the Javascript code.

Your Javascript bookmarklet will now run as it is suppose to in the Google Chrome web browser.