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.

Userscript Gist

Run Userscript in Tampermonkey

1. 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