Questions? Call (860)407-2687
find us on:


How to Code a JS Bookmarklet Easily 🖳

short url:

How To Build A Bookmarklet From JS Code 📑

Click to Play Video About How To Build A Bookmarklet From JS 🖳
  • How to Create a Javascript Bookmarklet
  • Difference Between Javascript and a Javascript Bookmarklet
  • Code Syntax of a Javascript Bookmarket
  • 2 Ways to Run a Javascript Bookmarklet
  • How to Save your Javascript Bookmarklet to Web Browser Bookmarks
  • Chrome Javascript Bookmarklet not Working
  • Sample Bookmarklet Code

This web page goes into how to code a bookmarklet from Javascript.

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.

javascript
1:
2:
3:
javascript: (function() {
  // 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
Image Showing how to 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
Image Showing how to 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.

Sample Javascript Bookmarklet Code

The following Javascipt code in the textbox below is an example of bookmarklet code. What the code below does is it creates a textbox on any page that collects any text from the web page that you select with your mouse. Sort of a content scraper bookmarklet. You are free to take this content scraper bookmarklet code and use it. Remember your first want to put all the Javascript code on one line.

You can then either run it immediately by pasting it in the web browsers address bar when you are on the website you wish to scrape content from or save it as a web browser bookmark. You can also save this bookmarklet to your web browser bookmarks bar by simply dragging this link Content Scraper Bookmarklet to your web browser bookmarks bar.

COMMENTS ON HOW TO MAKE A BOOKMARKLET FROM JAVASCRIPT CODE 📑

Feel free to submit your comment below. Anything that does not contribute and is just spam will automatically be deleted. Questions marked by * are required. Comments are checked by a human to make sure they are not spam/automated and are on topic and related to How to Create a Bookmarklet from Javascript Code ⌨. 
NAME:
EMAIL:
COMMENT:
HTML OK. Allowable HTML tags include: <p></p>, <i></i>, <b></b>, <em></em>, <strong></strong>, <ul><li></li></ul>, <ol><li></li></ol>
Question ❔
Back to Top