Tamper Web Pages Using Tampermonkey
Write custom javascript to modify any web pages
Photo by Josh Boot on Unsplash
Introduction
Hello. Before diving into this article, first, we need to know few things.
1. What is a Userscript?
A userscript is a program, usually written in JavaScript, for modifying web pages
- wikipedia
2. Why we need a Userscript?
Suppose we wanted to modify the web page dynamically like adding export to PDF button, display the number of words in a page, etc. We can achieve these functionalities by writing custom javascript.
3. How to add Userscript to a web page?
Chrome provides a built-in feature called Snippets, where we can run custom javascript on web pages. I have written an article explaining it in detail. It comes with a limitation that the script cannot be triggered automatically.
4. What is a Userscript Manager?
A userscript manager is a type of browser extension that provides a user interface to manage userscripts.
- wikipedia
One of the popular userscripts managers is Tampermonkey. This article will add a Toggle password visibility feature using Tampermonkey which adds a checkbox for all the password inputs on a page. The checkbox can be used to show and hide the password.
Toggle Password Visibility
Install Tampermonkey
Tampermonkey extension is available for almost all the browsers like Chrome, Firefox, Edge, Safari, etc. You can download the chrome extension here.
Userscript to Add Show Password Checkbox
The userscript can be downloaded from the below gist.
https://medium.com/media/05b668377b9e96606f2383330dae84de/href
Run Userscript in Tampermonkey
- Open your browser and click the Tampermonkey icon and click Create a new script
Create new script
2. It will redirect to a new page. Copy the script on the page and make sure @match is set to https://*/* so that the script runs for all sites. Click ctrl + s to save it.
Copy script
3. Now open any web page that has a password box. Here I am opening Github and Geeks for Geeks.
Github
Geeks for Geeks
Conclusion
Tampermonkey comes in handy where we need to modify the content of any web page to add custom functionality. We can add any functionalities from modifying HTML DOM to making Ajax calls.
Thank you 🤘
To know more about me, visit ganeshkumarm.me
Tamper Web Pages Using Tampermonkey was originally published in Nerd For Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.