DEV Community

Bikash Mishra
Bikash Mishra

Posted on • Edited on

Run Scripts on websites using this simple technique

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Tweet this post
Follow me on Twitter @forkbikash

Top comments (3)

Collapse
 
grahamthedev profile image
GrahamTheDev

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 πŸ˜‚)!

A WYSIWYG for dev.to:

A "click to tweet" button creator

Collapse
 
forkbikash profile image
Bikash Mishra

Thanks @inhuofficial for pointing out. I will edit the post.

Collapse
 
chawan4u profile image
mahesh

Nice