How to load a style sheet and script locally for websites I use often and want customize for personal use?

Question

So i have an oddball question I am having a hard time finding an answer to. There are many websites I have to use everyday for work in addition with personal websites I like to use. However some of the UI designs really bug me and i would like to add custom styles and if possible scripts to any website I like but only on my local machine.

For example. I can open dev tools on any website and customize anything I like. Is there a way to save those changes so that every time you visit the website it applies the changes made in dev tools. Or perhaps make it load specific style-sheets to websites I pre-set in advance on my local machine.

Where would I even start?

I am using Windows-7-64bit and my preferred browser is chrome. (referenced in case there's already solutions for these programs specially - but not required)

Thanks for any input!

Answer 1

I have been using the free Tampermonkey Chrome Extension. It allows you to insert custom javascript into any web page. You can target the entire domain or just one page on the domain. And it gives you a clean dashboard for managing all your scripts by domain/url.

The script i use in Tampermonkey to easily insert my CSS STYLES looks like this

(function() {

  'use strict';

  function addCss(cssString) {
      var head = document.getElementsByTagName('head')[0];
      var newCss = document.createElement('style');
      newCss.type = "text/css";
      newCss.innerHTML = cssString;
      head.appendChild(newCss);
  }

  addCss(' body { background-color: #000; } .MyCssClass { display:none; } #MyCssID { color:green; } ');


})();