How to Save “Inspect Element” Changes Permanently

Published by Nyau Wai Hoe - Updated on

Modern web browsers provide developers and curious users with a powerful tool known as the “Inspect Element” feature. This tool allows you to view and temporarily modify the HTML and CSS of a web page. However, these changes are lost once the page is refreshed. For those seeking to make these changes more permanent on their local machines, one popular solution is using the Tampermonkey browser extension.

This comprehensive guide will provide step-by-step instructions on how to make “Inspect Element” changes permanent using Tampermonkey.

Save Inspect Element Changes Permanently

Saving Inspect element changes permanently (even after refresh)

In the following sections, we will guide you through a step-by-step process to permanently save the changes you make using the ‘Inspect Element’ tool, ensuring they persist even after refreshing the page.

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

Step 1: Install Tampermonkey

Tampermonkey is a user script manager that’s available for a variety of browsers including Chrome, Firefox, and Microsoft Edge. With Tampermonkey, you can create, edit, and run user scripts, which are pieces of code that modify the content of web pages on the fly as they load.

To install Tampermonkey in your browser, follow these steps:

  1. Launch your browser and navigate to the extensions or add-ons marketplace. For example, for Chrome users, you would go to
  2. Enter Tampermonkey into the search bar and select the extension from the search results.Search for tampermonkey extension in Chrome
  3. Click on “Add to [Your Browser’s Name]” (e.g. “Add to Chrome”) and follow the on-screen instructions to install Tampermonkey.Install Tampermonkey

Step 2: Identify the changes you want to make

Using the “Inspect Element” tool, make the changes you’d like to see permanent. For example, you might want to change the background color of a website.

  1. Navigate to the web page you want to alter.
  2. Right-click on the specific element you wish to modify and select “Inspect” or “Inspect Element”.Permanent Inspect Element
  3. The browser will open a developer tools panel, displaying the underlying code of the website. You can now alter the HTML or CSS code live to see the effects of your changes.

Remember, the changes you make with the “Inspect Element” tool are temporary and will disappear upon refreshing the page. Therefore, it’s important to jot down or copy the changes you make, as you will need to incorporate these changes into your Tampermonkey script.

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

Step 3: Create a new user script in Tampermonkey

After identifying the changes you wish to make, the next step involves setting up a user script to implement these changes every time the page loads.

  1. Click on the Tampermonkey icon in your browser’s toolbar.
  2. From the dropdown menu, select “Create a new script…”.How to create a tampermonkey script
  3. This will open a new tab with a text editor. Here, you can input your custom script.

Related resource: Downloading HTML from a Website

    Step 4: Write your user script

    Start with the default template provided by Tampermonkey. You will need to customize the header part to ensure your script runs on the desired website.

    Here’s a basic setup if you’re trying to change the background color of

    // ==UserScript==
    // @name        Change Background of Example
    // @namespace
    // @version     0.1
    // @description Change the background color of
    // @author      You
    // @match*
    // @grant       none
    // ==/UserScript==

    Note: This metadata is important. For example, the @match directive ensures that the script runs only on*.

    After setting up the metadata, you will need to integrate the changes you recorded from the “Inspect Element” tool into your script. Here’s a basic example:

    (function() {
       'use strict';
       // Here's where you integrate your changes. For example: = "yellow";
       // Continue adding any other modifications.

    Tampermonkey permanent inspect element

    Another example:

    The line = "yellow"; changes the background color of the entire <body> element of the webpage.

    If you want to change the background color of all elements with a class, for example, named “main”, you’d use the following:

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

    How to use Tampermonkey code for permanent inspect element

    It’s essential to understand the syntax and capabilities of writing scripts for Tampermonkey. While the platform is intuitive for those familiar with JavaScript, newcomers might benefit from some resources. The official Tampermonkey documentation is an excellent starting point, offering comprehensive insights into script creation, API usage, and more. Furthermore, many online forums and communities, such as Reddit and Stack Overflow, regularly discuss Tampermonkey scripts.

    Handy guide: DNS Servers to Unblock Websites and Possibly Everything

    Step 4: Saving and testing your script

    After you’ve written your script and integrated your changes, you need to save your work. You can either navigate to “File” within the Tampermonkey editor and select “Save” or simply click the floppy disk icon.

    Permanent Inspect Element Chrome Firefox or Edge

    Navigate to the website that you have modified. If you have correctly followed the steps, you should see your changes applied, and they should persist even after refreshing the page.

    how to save inspect element after refresh

    Step 5: Managing and modifying your scripts

    As websites are continually being updated, your script might occasionally stop functioning as intended. In such cases, you can revisit the website and use the “Inspect Element” tool to identify any changes in the code. You can then modify your Tampermonkey script accordingly to ensure that your changes remain effective.


    Tampermonkey empowers users to personalize their browsing experiences to a great extent. With “Inspect Element” being limited to temporary modifications, Tampermonkey allows you to make permanent changes to your favorite websites. It’s important to remember that these changes only reflect in your local browser and don’t alter the actual website for others. Hence, feel free to tweak the web to your heart’s content and make your browsing experience truly unique.

    Nyau Wai Hoe
    Nyau Wai Hoe is the Founder and Chief Editor of With a degree in software engineering and over 12 years of experience in the tech support industry, Nyau has established himself as an expert in the field, with a primary focus on the Microsoft Windows operating system. As a tech enthusiast, he loves exploring new technologies and leveraging them to solve real-life problems.

    Share via
    Copy link