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:
1 2 3 4 | javascript <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// code</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The code to download the image I will write as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | javascript <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> document <span class="token punctuation">.</span> <span class="token function">querySelectorAll</span> <span class="token punctuation">(</span> <span class="token string">"img"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">img</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> img <span class="token punctuation">.</span> src <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token operator">=></span> response <span class="token punctuation">.</span> <span class="token function">blob</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">blob</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> a <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">"a"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> a <span class="token punctuation">.</span> href <span class="token operator">=</span> <span class="token constant">URL</span> <span class="token punctuation">.</span> <span class="token function">createObjectURL</span> <span class="token punctuation">(</span> blob <span class="token punctuation">)</span> <span class="token punctuation">;</span> a <span class="token punctuation">.</span> download <span class="token operator">=</span> img <span class="token punctuation">.</span> src <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">"/"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">pop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> a <span class="token punctuation">.</span> target <span class="token operator">=</span> <span class="token string">"blank"</span> <span class="token punctuation">;</span> a <span class="token punctuation">.</span> <span class="token function">click</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> javascript:(function(){//code})() <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Tên Bookmarklet <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> |
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:
1 2 3 4 5 6 | javascript <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> script <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">"script"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> script <span class="token punctuation">.</span> src <span class="token operator">=</span> <span class="token string">"https://my-code.min.js?"</span> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">getTime</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> script <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Conclusion
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
