WittCode💻

Add THIS CSS Property to Your Content Scripts

By

Learn a very useful CSS property for content scripts that allows injected elements to have a consistent appearance.

Table of Contents 📖

Content Script Style Inheritance

As content scripts are injected into a webpage, they inherit the CSS styles from the webpage. This causes elements to look different on different websites. For example, a div appended to example.com will look different than a div appended to wittcepter.wittcode.com.

WARNING: WittCepter is the name of my Chrome Extension. Go check it out on the Chrome Webstore!

const myDiv = document.createElement('div');
myDiv.textContent = 'Hello, world!';
document.body.appendChild(myDiv);

div {
  width: 600px;
  margin: 5em auto;
  padding: 2em;
  background-color: #fdfdff;
  border-radius: 0.5em;
  box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.02);
}

div {
  font-family: 'Roboto';
  padding: 0;
  margin: 0;
}

The CSS all Property

To maintain consistent styles across webpages, we can use the CSS all property. This property resets all other properties to their initial values.

myDiv.style = 'all: initial;';

Setting all to initial changes all the properties applied to the element to their initial values. Now the div that we appended looks the same on every site.