5

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)

3 Answers 3

5

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.

2
  • 1
    Could you summarize your article here? We prefer you don't just link your own site as an answer Feb 15, 2012 at 22:38
  • cool. thanks for suggestion. I'm using Stylish for chrome.
    – Pennf0lio
    Feb 16, 2012 at 7:58
3

Greasemonkey FTW!

5
  • +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. Feb 14, 2012 at 15:20
  • 3
    Can you expand your answer, please? Maybe show how to achieve what the OP asks for.
    – slhck
    Feb 14, 2012 at 21:04
  • 1
    Sorry but I don't have the required JS knowledge.
    – m0skit0
    Feb 14, 2012 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, 2012 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, 2012 at 9:25
0

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .