Chrome CSS Local Overrides instead of !important for Chrome Extension

Question

I originally made a Chrome Extension that overrides some of the margins, padding, and font size CSS on a website using.important. It was pretty cumbersome and a bit painful to update since the website is pretty complex.

I then discovered Local Overrides in the Chrome Developer Tools which allows me to make all my edits in Chrome, see the changes, and a CSS file is generated. Is there a good way to take the CSS file, build it into a Chrome Extension, and load it independently of the Chrome Developer Tools?

Answer 1

So I was able to figure this out by injecting the CSS file from Developer Tools via a Javascript content-script in my extension. I simply copy the CSS file to my extension directory and it is good to go with the following code in my JS file:

window.onload = function() {
var link = document.createElement('link');
link.href = chrome.extension.getURL('style.css');
link.type = 'text/css';
link.rel = 'stylesheet';
link.media = 'all';
document.getElementsByTagName('HEAD')[0].appendChild(link);
}

This did not require me to modify the CSS after the fact or use !important .