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.

Add THIS CSS Property to Your Content Scripts