12
BOOKMARKLETS!
PYer (2045)

What is a bookmarklet?

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:

<a href="javascript:alert(‘Hello World!’)">Hello World</a>

If you use double quotes it looks like:

<a href="javascript:alert(“Hello World!”)”>Hello World</a>

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

uhm... it works.... and is also useless...

javascript: const faces = ['OwO ', 'UwU', 'TwT', '>w<', '^w^']; let face = faces[Math.floor(Math.random()*faces.length)]; document.write('<body style=\'background-color: black;\'></body><title>' + face + '</title><p style=\'text-align: center; font-size: 500px; font-family: Arial; color: white;\'>' + face + '</p>');

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 😀

You are viewing a single comment. View All
4
PYer (2045)

@ebest k. I cant figure out how to add screenshots can you help me?