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:

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.
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:

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

Pennf0lio

Posted 2012-02-14T15:07:15.427

Reputation: 1 403

Answers

I found my answer and it's Chrom Dev Tool Autosave

https://github.com/NV/chrome-devtools-autosave

It's an awesome way to edit css and js on the fly without leaving your browser. A short intro http://www.youtube.com/watch?v=M4rme6EUvwQ

Pennf0lio

Posted 2012-02-14T15:07:15.427

Reputation: 1 403

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.

Barkeep

Posted 2012-02-14T15:07:15.427

Reputation: 51

1Could you summarize your article here? We prefer you don't just link your own site as an answer – Simon Sheehan – 2012-02-15T22:38:42.840

cool. thanks for suggestion. I'm using Stylish for chrome. – Pennf0lio – 2012-02-16T07:58:55.997

Greasemonkey FTW!

m0skit0

Posted 2012-02-14T15:07:15.427

Reputation: 1 317

+1 for greasemonkey. In theory, there are css files for Firefox that you can edit, but go greasemonkey. There are so many pre-made scripts for it. – Rich Homolka – 2012-02-14T15:20:46.043

2Can you expand your answer, please? Maybe show how to achieve what the OP asks for. – slhck – 2012-02-14T21:04:49.827

1Sorry but I don't have the required JS knowledge. – m0skit0 – 2012-02-14T21:31:26.847

Hmm.. I don't have any extensive background building scripts for grease monkey and most of the scripts function for a specific site.

What I want is, I can append an external .js file or .css file to the url i'm editing or want to change. – Pennf0lio – 2012-02-16T07:47:22.787

What I meant with this is to write your own scripts, of course. In the @include tag you can specify which sites it works for. IMHO it's way easier than having to change JS/CSS each time and attach to the project to test. You just have to modify your GreaseMonkey script and reload the page. – m0skit0 – 2012-02-16T09:25:55.167