Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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)
share|improve this question

3 Answers 3

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.

share|improve this answer
1  
Could you summarize your article here? We prefer you don't just link your own site as an answer –  Simon Sheehan Feb 15 '12 at 22:38
    
cool. thanks for suggestion. I'm using Stylish for chrome. –  Pennf0lio Feb 16 '12 at 7:58

Greasemonkey FTW!

share|improve this answer
    
+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 Feb 14 '12 at 15:20
2  
Can you expand your answer, please? Maybe show how to achieve what the OP asks for. –  slhck Feb 14 '12 at 21:04
1  
Sorry but I don't have the required JS knowledge. –  m0skit0 Feb 14 '12 at 21:31
    
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 Feb 16 '12 at 7:47
    
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 Feb 16 '12 at 9:25
up vote 0 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.