This content originally appeared on DEV Community and was authored by
What are bookmarklets?
If you are a developer, you might have probably used or heard of Bookmarklets once or twice in your coding journey.
Bookmarklets are javascript extensions that you can add to your browser that almost anyone can use. Developing one is extremely simple and super easy for anyone to use.
They can do anything from simply making an alert popup box to making a post request with the fetch api.
How to make one
<a> tags in HTML can have javascript in their href attribute. An example would be
<a href="javascript: alert('hello world');">Anchor Tag</a>
If you make that in HTML and drag it into your bookmarks bar, you have just added a bookmarklet to your browser. It's that simple.
Sometimes, to quickly view the stats of a certain site, I will make a bookmarklet that runs on the Fetch API so that it alerts me with all the information I need.
Note that all the javascript in your bookmarklet has to be minified.
<a href="javascript: fetch('https://api.website.com/endpoint').then((data) => { alert('data'); })"></a>
Bookmarklets can control documents from their top level. That means you can completely wipe the body content of a URL temporarily and replace it with something else.
<a href="javascript: document.body.innerHTML = '<h1>Hacked</h1>' })"></a>
What will you make? A bookmarklet to display your codepen pen live? An extension to let you create a dev.to post in one click? A bookmarklet to make yourself a temporary dark mode? Go crazy!
Don't forget to mention what you've made in the comments below!
This content originally appeared on DEV Community and was authored by
| Sciencx (2021-04-08T23:35:21+00:00) Bookmarklets – The Ultimate Web Tools – What they are and how to make them.. Retrieved from https://www.scien.cx/2021/04/08/bookmarklets-the-ultimate-web-tools-what-they-are-and-how-to-make-them/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.