What are bookmarklets?
Developing a bookmarklet is simple and easy to use.
They can even make a post request with the fetch API.
How to develop one
href attribute of
<a> tags in HTML.
An example would be
Make that in HTML and drag it into your bookmarks bar, you have just added a bookmarklet to your browser. Isn't it simple?
Bookmarklet can be used to modify(or filter) the content of a website.
Below is an example:
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
Top comments (3)
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:
7 new features, 51.3 new bugs added 😋, the DEV.TO 👩💻👨💻 editor [PART DEUX!]
InHuOfficial ・ Apr 7 ・ 8 min read
A "click to tweet" button creator
Do you want more 📈 shares on your dev.to articles❓ Add a fancy "click to tweet" button to your posts in just one click!
InHuOfficial ・ Jun 20 ・ 11 min read
Thanks @inhuofficial for pointing out. I will edit the post.