HTML Remix - Dont copy code, remix it!

April 23, 2009

Developer style switch (Chrome extension)

Hello world !,

It is proud to announce my first Google Chrome extension. I hope this will be useful to work on style amends of live site. Basically what this so is, load new custom style to any website without actually making any changes on Live site. To work this, you need latest dev version of Chrome, which supports extensions.

Style switch Chrome extension

Style switch Chrome extension

Installing chrome extension

1 . Make sure you have latest dev version of Chrome.

2 . Download Developer style switch extension and extract the zip file in to c:\myextension (changeable as per requirement)

3 . Change target of your shortcut to Chrome in desktop to "Keep this as it is\chrome.exe" –enable-extensions –load-extension="c:\myextension"

4 . Installation is completed. Now open Chrome via the modified shortcut file. Check htmlremix.com . You will see the Magic

Modifying Developer style extension to use for your website

1 . Open "manifest.json" and change "htmlremix.com" to your site url

2 . Open "foo.js". Change "footer" to ID of any html element in your site.

3 . Change css file path in 4th line

4 . Check your site now. See the magic. It is loading your new css file !.


5 Responses to “Developer style switch (Chrome extension)”

  1. Californian says:

    Whoops I’m stupid you would have to repackage it every time you modified it, so it is best to have it unpackaged. Nevermind.

    • Remiz says:

      Hmm :)
      well, but it is better to give packed extension. I should check how can I make those values configurable

  2. Californian says:

    I packaged this into a .crx for you if you want it. That way all they have to do is click it on this page and it will load and not do the typing in that shortcut.

  3. webcastle says:

    very useful this post……….
    Thanks

  4. sunil says:

    wawoo.. thats pretty cool!

Leave a Reply


nine + 2 =