How to Save “Inspect Element” Changes Permanently

Ever stumbled upon the “Inspect Element” tool in your web browser? It’s a neat feature that lets you peek and poke around a webpage’s HTML and CSS. The catch? Any tweaks you make vanish once you hit refresh. But, for those of us wanting to keep our changes for good, there’s a handy extension called Tampermonkey.

Let’s walk you through how to use Tampermonkey to make those “Inspect Element” tweaks stick around for good.

Saving Inspect element changes permanently (even after refresh)

We’ll guide you step by step to make sure the changes you love don’t disappear after you hit refresh.

Also see: How to Check When a Web Page Was Last Updated

Step 1: Install Tampermonkey

Tampermonkey is like a magic wand for your browser. It lets you keep and run little snippets of code to change up web pages as they load. It works on Chrome, Firefox, and Microsoft Edge.

To get Tampermonkey:

1. Open your browser and head to its extension shop. Chrome users, for instance, would visit https://chrome.google.com/webstore/category/extensions.
2. Type Tampermonkey in the search bar and click on it from the results.
3. Hit “Add to [Your Browser’s Name]” and do what the screen tells you to add Tampermonkey.

Step 2: Identify the changes you want to make

Decide what you want to change on the webpage using the “Inspect Element” tool.

1. Go to the webpage you want to change.
2. Right-click the part you want to tweak and choose “Inspect” or “Inspect Element”.
3. The developer tools panel will pop up, showing the website’s code. Now you can play around with the HTML or CSS to see your changes in action.

Keep in mind, these changes are just temporary. So, remember to note down or copy the tweaks you make, as you’ll need them for your Tampermonkey script later.

Useful tip: How to Access High Traffic and Very Busy Websites

Step 3: Create a new user script in Tampermonkey

Next up, it’s time to put those changes into a Tampermonkey script.

1. Click the Tampermonkey icon in your toolbar.
2. Select “Create a new script…” from the menu.
3. A new tab with a text editor opens up. This is where you’ll write your custom script.

Related resource: Downloading HTML from a Website

Step 4: Write your user script

Start with Tampermonkey’s default template and tweak the header to make sure it runs on the website you want.

For example, if you’re aiming to change the background color on example.com, here’s how you’d set up your script:

// ==UserScript==
// @name        Change Background of Example
// @namespace   http://tampermonkey.net/
// @version     0.1
// @description Change the background color of example.com
// @author      You
// @match       https://www.example.com/*
// @grant       none
// ==/UserScript==

Note: This setup is crucial. The @match part makes sure your script only runs on https://www.example.com/*.

Then, you’d add the actual changes, like so:

(function() {
   'use strict';
   // Add your changes here. For instance:
   document.body.style.backgroundColor = "yellow";
   // And any other tweaks you want.
})();

Another example:

To change the background color of all elements tagged with the class “main”, you’d do this:

(function() {
   'use strict';
   let elements = document.querySelectorAll(".main");
   elements.forEach(function(element) {
      element.style.backgroundColor = "yellow";
   });
})();

Getting the hang of Tampermonkey scripts can be a bit tricky if you’re new to JavaScript, but there’s a bunch of help available. Start with the Tampermonkey official docs and dive into forums like Reddit or Stack Overflow for more tips and tricks.

Handy guide: DNS Servers to Unblock Websites and Possibly Everything

Step 4: Saving and testing your script

After getting your script just right, don’t forget to save it. Click on “File” in the Tampermonkey editor and choose “Save”, or just hit the save icon.

Now, go to the website you tweaked. If everything was done correctly, you’ll see your changes sticking around, even after refreshing the page.

Step 5: Managing and modifying your scripts

Since websites often update, you might find your script doesn’t work as expected down the line. If that happens, just go back, use the “Inspect Element” tool to spot any new changes, and tweak your script to keep your customizations in play.

Summing things up

Tampermonkey gives you the power to customize how you see websites in a way that sticks around longer than just using “Inspect Element”, which only makes changes that disappear after you close the page. The cool part is, all these changes you make with Tampermonkey are just for you. They don’t change the website for everyone else, so you can go ahead and adjust things however you like to make browsing the web a lot more fun for yourself.