A bookmarklet is similar to an extension, but is used by clicking a bookmark. According to wikipedia:
A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. Bookmarklets are unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually JavaScript programs. Regardless of whether bookmarklet utilities are stored as bookmarks or hyperlinks, they add one-click functions to a browser or web page. When clicked, a bookmarklet performs one of a wide variety of operations, such as running a search query or extracting data from a table. For example, clicking on a bookmarklet after selecting text on a webpage could run an Internet search on the selected text and display a search engine results page.
Create a bookmarklet
Creating a bookmarklet is easy. (If you do know how to create a bookmark. If not read Creating A Bookmark )
Let's create a simple example:
First, create a bookmark. As for the title of the bookmark, name it “Hello World”. Instead of keeping the url of the page as the bookmark type javascript:alert(‘Hello World!’). There! Click save or whatever it is in your search engine. And click the bookmark. You should have an alert message saying “Hello World!” appear!
To run js in a bookmark, you need to have the javascript: prefix before it. You can only type one line so make sure to use your semicolons! In addition, you can not use double quotes. The search engine saves the bookmark in code that looks something like this:
And causes an error. If you have multiple lines, create an anonymous function: javascript:(function(){ var x=prompt(‘Hi say something:’); alert(‘You said: ’ + x); })()
Notice there are NO double quotes.
Let's go over some examples:
Google Search: javascript:(function(){window.open('https://www.google.com/search?q='+prompt('Google Search:', '').split(' ').join('+'), '', 'width=800,height=500,left=10,top=10,scrollbar=yes');})();
The above example opens up a new window with a search query of your input! Feel free to copy any of these or the ones listed below.
Calculator: javascript:(function(){var evl,expr=prompt('Formula...','');with(Math)try{evl=parseFloat(eval(expr));if(isNaN(evl)){throw Error('Not a number!');}prompt('Result of '+expr+':',evl)}catch(evl){alert(evl);}})();
@JSer ‘s Rolling Sky: (Thanks for creating such an awesome game!) javascript:window.open('https://Rolling-Sky--jser.repl.co', '', 'top=15,left=15,scrollbar=yes,width=500,height=600')
Thank you for reading! Please upvote and comment your own bookmarklets, to be added to the community creations section! I hope I get a content creator tag for this 😀
Nice! Though, you don't need an anonymous function. Also, in some cases, you'll need to embed a script tag since not all functions will run as a bookmarklet natively (for example, DOM is extremely limited in bookmarklets).
hmmm... interesting. I like the anonymous function because it keeps it clean. I hadn't thought about the script tag though. thanks for the feedback. @AmazingMech2418
What is a bookmarklet?
A bookmarklet is similar to an extension, but is used by clicking a bookmark. According to wikipedia:
Create a bookmarklet
Creating a bookmarklet is easy. (If you do know how to create a bookmark. If not read Creating A Bookmark )
Let's create a simple example:
First, create a bookmark. As for the title of the bookmark, name it “Hello World”. Instead of keeping the url of the page as the bookmark type
javascript:alert(‘Hello World!’). There! Click save or whatever it is in your search engine. And click the bookmark. You should have an alert message saying “Hello World!” appear!To run js in a bookmark, you need to have the
javascript:prefix before it. You can only type one line so make sure to use your semicolons! In addition, you can not use double quotes. The search engine saves the bookmark in code that looks something like this:If you use double quotes it looks like:
And causes an error. If you have multiple lines, create an anonymous function:
javascript:(function(){ var x=prompt(‘Hi say something:’); alert(‘You said: ’ + x); })()Notice there are NO double quotes.
Let's go over some examples:
Google Search:
javascript:(function(){window.open('https://www.google.com/search?q='+prompt('Google Search:', '').split(' ').join('+'), '', 'width=800,height=500,left=10,top=10,scrollbar=yes');})();The above example opens up a new window with a search query of your input! Feel free to copy any of these or the ones listed below.
Calculator:
javascript:(function(){var evl,expr=prompt('Formula...','');with(Math)try{evl=parseFloat(eval(expr));if(isNaN(evl)){throw Error('Not a number!');}prompt('Result of '+expr+':',evl)}catch(evl){alert(evl);}})();@JSer ‘s Rolling Sky: (Thanks for creating such an awesome game!)
javascript:window.open('https://Rolling-Sky--jser.repl.co', '', 'top=15,left=15,scrollbar=yes,width=500,height=600')Community Creations
@Zavexeon Faces Generator
@AdCharity Offline Editor
@DREWNOLT
@techgeek680
Thank you for reading! Please upvote and comment your own bookmarklets, to be added to the community creations section! I hope I get a content creator tag for this 😀
Nice! Though, you don't need an anonymous function. Also, in some cases, you'll need to embed a script tag since not all functions will run as a bookmarklet natively (for example, DOM is extremely limited in bookmarklets).
hmmm... interesting. I like the anonymous function because it keeps it clean. I hadn't thought about the script tag though. thanks for the feedback. @AmazingMech2418
@PYer You're welcome! I've been working with bookmarklets for a while and the script tag, while not always necessary, is sometimes needed.