Run Scripts on websites using this simple technique

#bookmarklet #javascript #webdev #html

What are bookmarklets?

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser.

Developing a bookmarklet is simple and easy to use.

They can even make a post request with the fetch API.

How to develop one

Use javascript in href attribute of <a> tags in HTML.
An example would be

<a href="javascript: alert('hello world');">click me</a>

Make that in HTML and drag it into your bookmarks bar, you have just added a bookmarklet to your browser. Isn't it simple?

All the javascript in your bookmarklet has to be minified.

<a href="javascript: fetch('https://api.website.com/endpoint').then((data) => { alert('data'); })"></a>

Bookmarklet can be used to modify(or filter) the content of a website.
Below is an example:

<a href="javascript: document.body.innerHTML = '<h1>yeah!</h1>' })"></a>

The main reason you should consider developing or using a bookmarklet is for productivity.

How to install a bookmarklet?

There are many ways to install a bookmarklet. I will show one of them which is probably the simplest one.

Search for bookmarklets you want to install on the internet.
Drag the bookmarklet from the page to your Bookmarks Toolbar. It should show on the toolbar now.
If the Bookmarks Toolbar is not visible then you first have to show the Bookmarks Toolbar by right-clicking on an empty section of the Tab Strip and checking the Bookmarks Toolbar in the pop-up menu. Now repeat the above step.

How to use the installed bookmarklet?

Go on a website where you want to use your bookmarklet.
Click the bookmarklet on your Bookmarks Toolbar. You will see the magic happening.

You can find many more pre-built bookmarklets on the internet.

I hope this helps someone out there.

Don't forget to mention what you've made in the comments below!

If you liked this post, you can find more by:

Following me on Twitter: @forkbikash
Following me on GitHub: @forkbikash
Following me on this beautiful platform: @forkbikash

Tweet this post
Follow me on Twitter @forkbikash

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (3)

GrahamTheDev • Jun 24 '21

Nice and simple introduction to bookmarklets, have a ❤ and a 🦄!

You missed the best technique which is injecting a script into the page itself so you can really do something magical with a page!

Here are two you may find interesting using that technique (As you encouraged sharing what we have built and I will never pass up an opportunity to shamelessly self promote 😂)!