Nerd For Tech
Published in

Nerd For Tech

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

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Make Your Own Modal, a Fully Customizable Angular Component

Developing Vue Apps with the Quasar Library — Table No Data Display and Custom Sorting

How to Format a Number with Commas as Thousands Digit Separators in JavaScript?

EcmaScript vs JavaScript

Creating path aliases in create-react-app with react-app-rewired

Introduction to TypeScript Enums

Unique And Famous Apps Built On React Native

React Native

10 Ways To Improve Your Next.js App Performance

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ganesh Kumar Marimuthu

Ganesh Kumar Marimuthu

SDE II at Amazon. ✍️ Content Writer 🔸 👨‍💻 Full Stack Engineer

More from Medium

A caveat: CORS in JAX-RS REST APIs

Top NoSQL databases in 2022 — Phpflow.com

Building a Software Development Team

Zwannah API Structure Specification (Actors-Supporters Arrangement)