删除特定的内联 Styles

Question

The Solution

As it turns out, the solution is to just remove the code and inject the CSS via ./styles/srdm-style.css with important tacked on to the end of each value.

div, h1, h2, h3, h4, h5 {
  color: darkgray !important;
}

input {
  background-color: lightGray  !important;
}

---

Another day, another project.

I am writing a chrome extension and it works somewhat. My company's website doesn't have a dark mode for reasons that will become clear later in this post. I had just gotten a dark mode app but it was not working for our websites. So I decided to take on the challenge myself. After running into a few roadblocks I got the beginnings of a Chrome extension that would make changes and run the code. You can find the repo on GitHub .

What I have now

The site I am testing against

SmartRent

Example

This is an example element to illustrate what we are dealing with. I have modified the formatting to make it easier to read. Styles like this are all over our websites. I was given to understand that inline styles and scripts were frowned upon. Is that true?

<h3 dir="auto" aria-level="3" role="heading" class="css-4rbku5 css-901oao r-adyw6z r-vrz42v r-q4m81j" 
style="
  color: rgb(26, 31, 39); 
  font-family: &quot;Open Sans&quot;, sans-serif; 
  font-weight: 600;">
    Sign in to your Account
</h3>

Stylesheet

// ./styles/srdm-style.css

div, h1, h2, h3, h4, h5, input {
  background-color: #404040;
  color: darkgray;
}

div {
  box-shadow: darkgray 0px 2px 4px;
}

The code

This is my main script with a few things I have tried and commented out. Attempts 1 & 2 both appear to work on object: CSSStyleDeclaration

// ./content.js

"use strict";

  /* 
    @const Elements
    We are storing the elements that want to be changed into arrays.
  */
const Elements = { 
  h1: Array.from(document.getElementsByTagName("h1")),
  h2: Array.from(document.getElementsByTagName("h2")), 
  h3: Array.from(document.getElementsByTagName("h3")), 
  h4: Array.from(document.getElementsByTagName("h4")), 
  h5: Array.from(document.getElementsByTagName("h5")),
  divs: Array.from(document.getElementsByTagName("div")),
  input: Array.from(document.getElementsByTagName("input"))
};

const Functions = {
  stripInlineStyles: () => {

    console.log(JSON.parse(JSON.stringify(Elements)));

    
    for(const [key,value] of Object.entries(Elements) ){
      console.log(`${key}: ${value}`); // Using this to verify that the script is running
      value.forEach( (index) => {

      /*
        @description Attempt #1
        This is the first thing I tried. This is 
        supposed to find the property and remove it. 
        However, according to the MDN it 
        manipulates the css file, not the inline 
        style.
      */
        // index.style.removeProperty("background-color");
        // index.style.removeProperty("color");
        // index.style.removeProperty("box-shadow");

      /*
        @description attempt #2
        This is the next thing I tried. This is 
        supposed to find the (property)[https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty] and remove it.
        This also seems to  work on the stylesheet, 
        not the inline style. 
      */
        // index.style.backgroundColor( "" );
        // index.style.color( "" );
        // index.style.boxShadow( "" );

      /*
        @description attempt #3
        Eventually, I got the bright idea of trying 
        to manipulate the string of the inline style.
        I think this could work, but this wouldn't be
        my preferred option as manipulating strings
        in this way doesn't seem like an efficient 
        way to accomplish this. At this point, I had
        to stop looking at the code.
      */
        //  str declaration #1
        // let str = `index.style`

        // str declaration option #2
        // let str = `JSON.stringify(index.style)`;

        // let colorIndex;
        // let colorEnd;
        // let bgColorIndex;
        // let bgColorEnd;
        // let shadowIndex;
        // let shadowEnd;

        // bgColorIndex = str.indexOf("background-color:");
        
        // if( bgColorIndex !== -1 ){
        //   bgColorEnd = str.indexOf(";", bgColorIndex) ;
        //   str = `${str.substring(0, bgColorIndex - 1)}${str.substring(bgColorEnd + 1, str.length -  1 )}`;
        // }

        // colorIndex = str.indexOf("color:");

        // if(colorIndex !== -1 ){
        //   colorEnd = str.indexOf(";", colorIndex) ;
        //   str = `${str.substring(0, colorIndex - 1 )}${str.substring(colorEnd + 1, str.length - 1 )}`;
        // }

        // shadowIndex = str.indexOf("box-shadown:");
        
        // if(shadowIndex !== -1 ){
        //   shadowEnd = str.indexOf(";", shadowIndex) ;
        //   str = `${str.substring(0, shadowIndex - 1)}${str.substring(shadowEnd + 1, str.length - 1 )}`;
        // }
        
        // index.style = `${str}`;
      });
    }
  }
};

/*
We run the function as soon as the page loads.
*/
Functions.stripInlineStyles();

Answer 1

As it turns out, the solution is to just remove the code and inject the CSS via ./styles/srdm-style.css with important tacked on to the end of each value.