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 page provides step by step instructions how to make a JS bookmarklet easily.
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
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'.
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.
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 ...
Click the star icon ✰ on the very right hand side of the browsers address bar.
Give your Javascript bookmarklet a meaningful name so your memory will be triggered as to what the bookmarklet code does.
Select the folder where you wish to save the bookmarklet. The most convenient place is probably the bookmarks bar.
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
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.
In the URL text box paste all of the JavaScript code that makes up your bookmarklet.
Select or change where you wish to save this bookmarklet within your bookmarks.
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 ...
Press the HOME key on your keyboard to bring the caret to the beginning of the address bar.
Type in javascript:.
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.
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.
CONTENT RELATED TO HOW TO CREATE AND RUN A JAVASCRIPT BOOKMARKLET ⌨
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 Code a JS Bookmarklet Easily ⌨.