Browser where I can add my own custom CSS or Javascript

Is there a way to load my own custom CSS or Javascript while using a browser?

When I'm accessing a website or developing a website I want to load my own custom scripts from my computer. I know this can be done by Firebug or Chrome's developer toolbar, but after you refresh your browser your changes will be cleared too. This is exactly what I'm looking for adding CSS and Javascript, but I wish it has an option where you temporarily save your changes locally. Or it has an option to load external CSS or JS files.

Purpose:

  1. When I'm developing the frontend, sometimes it's convenient for me using Chrome's developer toolbar or Firefox's Firebug to change or tweak CSS properties because I can then see the changes in real time without refreshing. One problem I see is that every time I refresh my browser, my changes also get reset. Now I wish there were an option where I could save my changes locally or load my own external .css file or .js file.

  2. I want to customize how some websites look when viewed locally, e.g., accessing a blog that has too many ads. I want to apply CSS properties to hide the junk.

Browsers I use often:

  1. Google Chrome (for development: Built-in Dev Toolbar)
  2. Mozilla Firefox (for development: Firebug)

There are a couple of ways you can do this for CSS files. You can use an extension like stylish or use a custom file in the browser install folder ....

http://www.lostsaloon.com/technology/using-a-custom-stylesheet-in-a-web-browser/

For support with JS files, Greasemonkey as mentioned above is your best bet.


Greasemonkey FTW!