Bookmarklet – Make it simple to interact with the web

Tram Ho

Perhaps this technique has appeared for a long time and probably many people already know it, but really until now I have only known it, it feels extremely convenient and interesting, so I want to share it with you. know. Let’s learn about Bookmarklet and see how to create a simple and convenient tool using this technique.

What is bookmarklet?

When using the web browser, you must not be unfamiliar with the feature of bookmarking (bookmarking) the web pages that you often visit so that when you need it with just one click, it is easy to access again. The bookmarklet is also the bookmark, but instead of saving the URL of the web page, we will save the JavaScript commands. Thus, the bookmarklet can be visualized as a JavaScript program, a browser extension, helping you to add a certain feature to the web page with just one click.

Compared to a browser extension, it is lame, because the bookmarklet will only be able to manipulate the website you are visiting (read, add, modify the page’s DOM tree, just like the content_script of the extension. ). But convenience, simplicity and speed, from code step to use, is clearly an advantage for us to consider when having the right use case.

How to create a bookmarklet

Today I saw a post about how to download all images on the website by JS pretty well, I will implement this function with the bookmarklet and let’s see how simple it is:

The syntax for creating a bookmarklet is as follows:

The code to download the image I will write as follows:

Then, copy this code into the URL box of the bookmark:

Save it, that’s it. It only takes a minute to have a tool to download all the images on the website, too simple, right?

Share bookmarklet

To share your bookmarklet for others, you can apply the same way as this Wirify site. What they do is simply assign the JS code to the href of an anchor tag like this:

If others want to use it, just drag the link to their bookmark bar.

Use remote code

In case the JS code needs to be used too much, or you need to store the code in a certain host for convenience of development, and the code used is always the latest build version, you can apply the trick. The following to remote to the code:


Short sharing, but hope you also learn something new, interesting and useful to use in your work and life.  Thank you for watching.

Reference: Bookmarklet – Wikipedia

Github Linkedin Fandom

Share the news now

Source : Viblo