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

Since it'll be local and just for your viewing, a simple browser plugin should do the trick. There's a plug-in/add-on for Firefox and Chrome called "Stylish".

From their website : "User styles let you change the way websites look."

• Firefox version
• Chrome version

Answer 2

I have two Chrome Plugins:

Stylish for CSS: https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

And CJS for Javascript: https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en

Answer 3

I would recommend making your own chrome extension. https://developer.chrome.com/extensions

Extensions provide a lot of possibilities, but what you'll want to focus on is the content_scripts option in the manifest.json.

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "path/to/my/script.js"
      ],
      "css": [
        "path/to/my/style.css"
      ]
    },
    {
      "matches": ["http://www.google.com/*"],
      "js": [
        "path/to/other/script.js"
      ],
      "css": [
        "path/to/different/style.css"
      ]
    }
  ],

Here, you can specify different urls to apply scripts and css to. The json I've provided will apply certain js/css to every page and certain js/css to any page that matches the provided regex.

More info: https://developer.chrome.com/extensions/content_scripts

This can be run in developer mode for free, just drop your extension folder on chrome's extension page, or you can pay 5 bucks to publish your app and use it that way.

Answer 4

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; } ');


})();