Tweak or Inject code into websites from your browser with Custom Tampermonkey extension.

Rayan Fernandes
2 min readOct 7, 2023

--

Tamper the monkey ? What is it ?

Tampermonkey is a popular userscript manager that works with various web browsers, like Chrome, Safari, and Firefox. It allows users to inject custom JavaScript into any website, thereby customizing its behavior and look according to their preferences.

tampermonkey scripts dashboard/editor

1. For Development:

  • Rapid Prototyping: Instead of waiting for backend changes or deployments, frontend developers can make quick UI/UX changes using Tampermonkey.
  • Debugging: It offers a way to fix and test certain parts of web applications without going through the whole development process.

2. For Fun and Productivity:

  • Customization: Don’t like how a certain website looks? Change it! Want dark mode everywhere? Do it!
  • Automation: Automate repetitive tasks on websites. For instance, if you always fill out a form in a certain way, script it!

3. For Learning:

  • Understanding Web Apps: By interacting directly with web elements, budding developers can better understand how things work under the hood.

Getting Started with Tampermonkey

  1. Installation: Head to your browser’s extension store, search for Tampermonkey, and install it.
  2. Creating Your First Script: Once installed, click on the Tampermonkey icon and select “Create a new script”. A basic template appears. Here’s a basic example that changes the background of all paragraphs on a page to yellow:
// ==UserScript==
// @name Yellow Paragraphs
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Turn all paragraphs' backgrounds yellow.
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
let paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => p.style.backgroundColor = 'yellow');
})();
  1. Use and Enjoy: Navigate to any website, and you’ll notice the changes in action.

You can also find scripts written by others by searching over here, for example youtube — https://www.userscript.zone/search?source=header&q=youtube

A Few Words of Caution

While Tampermonkey is a fantastic tool, remember to:

  • Always Backup: If you’ve written a particularly long or useful script, back it up. Scripts can get lost during browser updates.
  • Trust Sources: Only install scripts from trusted sources. Malicious scripts can compromise your data.
  • Performance Issues: Overloading with scripts can slow down your browser. Be selective about what you run.

Conclusion

Tampermonkey is more than just a tool for developers. It’s a bridge that empowers everyday users to craft their browsing experience. Whether you’re a full-stack wizard, a MERN enthusiast, or just someone who likes to tinker with web pages for fun, Tampermonkey offers endless possibilities to play, learn, and innovate.

--

--

Rayan Fernandes
Rayan Fernandes

Written by Rayan Fernandes

Next.js | MERN Stack | Telegram bots | Blockchain

No responses yet