Magic of Browser Bookmarks - Automate Simple Tasks using JavaScript

As I promised in #LearnedToday, I'm going to show you how much you can achieve with this little bookmark feature in the browsers.

Ever wondered how to easily remove citations from a Wikipedia page? 

What are bookmarks?

The bookmarks in the browsers are to save the links to the pages you wish to visit again, or you just find them useful and save them for later. 

Instead of creating a text file "Imp Links" and saving all the links there (I've done it a lot), you could use the browser's bookmark feature.

The shortcut to bookmark a webpage in most browsers is ctrl+b.

What more can they do?

To sum up, they can run JavaScript on a page. So instead of opening the browser console to do run a couple lines of code, you could create a bookmark and click that instead.

Example?

Whenever I needed to copy something from Wikipedia, I usually had to deal with the references/citations they have. You must've seen those, with squared brackets around numbers, something like this [1] or with a disclaimer like [citation needed], etc. I needed to remove all those. 

Initially, I used to do it in MS Word manually, by Find and Replace. I don't remember that now, doesn't matter anyway. 

Finally, I came to know about these browser bookmarklets, and then a simple regex was enough to do the work for me.

Now I have a simple bookmark. I go to any Wikipedia page, select the text I need, and click the bookmark. Viola! Citations are removed.

How to create a bookmarklet?

Got to Bookmarks Manager

1. Click three vertical dots in the upper right corner > Bookmark > Bookmark Manager

Or chrome shortcut: ctrl+shift+o

Or type in the address bar: chrome://bookmarks/

2. Click three vertical dots in the upper right corner of Bookmark manager (Shows tooltip: Organize) 

3. Add new bookmark

4. It will show a popup with two fields: Name and URL. 

5. Give any appropriate name, and in the URL bar, paste the JavaScript code you want to execute.

6. Click Save. 

You have your bookmarklet ready. 

Show/Hide Bookmarks bar with ctrl+shift+b. Clicking on the name of your bookmark will run the underlying code. 

Any easier way to do this?

If you don't want to go through all those steps, there's a simple tool called Bookmarkleter. Paste your JS code, it will generate a link that you can drag and drop to the bookmarks bar. 

For example, drag and drop the following link to your bookmarks bar. This will allow you to change fonts on any website. 

Set Font

Which bookmarklets am I using?

1. Citation Remover: Removes citations from a Wikipedia page. Drag&drop this link to the bookmarks bar: Citation Remover
2. Set Font: If a website is using bad font, use this. As I use Urdu a lot, and Urdu without Nastaleeq font looks ugly. So I apply any font to the page available in my system. Payami Nastaleeq is the default one for me.
3. Calci: A tiny calculator which returns results of simple arithmetic operations.
4. StyleStripper: Strips all CSS styles from a webpage. Helpful if I don't want to load an entire page I want to copy something from. Also works on most of the sites which disable copying using JavaScript. Click StyleStripper and you can copy the text. 

Misc. bookmarklets I created

QuoraSkip: Skip Quora-enforced 'login' popup by removing added elements and blur overlay.

To those who requested, don't complain now. (Abuzar :D) I have shared it finally. More such tips will follow. Keep visiting! And I know you will. :wink:

Rab Raakha!