Blog Home  Home RSS 2.0 Atom 1.0 CDF  
Hairy Spider Blog - Inline CSS Editor
A web of intrigue
 
 Tuesday, February 28, 2006
Well it's not all that difficult.

I've just created something that will enable one to view and edit any scripts that are loaded in the browser.



In essence all you need to do is to create a class library and include a reference to the DOMHelper dll. Then you just need to create a usercontrol. Design the control as usual and when you come to work on the code element make the class inherit the bho.csseditor.Plugin class.


The first method you'll want to override is the Activate method this will be called when a new document is loaded and when the tab is made visible. The title property will be what's displayed in the tab and there's a property on the base object called ParentFrame from which you can get a reference to the mshtml.WebBrowser and mshtml.Document objects.

Once you are happy about life and your coding, then you can import your shiny new plugin into the DOMHelper. To do this is actually a bit of a nightmare, much harder than I thought it would be, but I'll let you know how I managed it and you can do the same back to me:

I found out using FUSLOGVW that you may need to add the DOMHelper and interop.shdocvw assemblies to the GAC. Having thought about this again you may also be able to get away with placing your assembly in the same folder as the DOMHelper that is loaded by Internet Explorer. You'll have to try this yourself.

Anyway, once you've added the assemblies to the GAC using GACUtil (available as part of the 300Mb SDK) you can then load the assembly. Click the little monitor image and choose add-ins and follow the instructions from there.

There you go - you're up and away.

As a starter for 10 you can download the DOMScripter Visual Studio Project, which also contains a binary if you're too lazy to build the code yourself.

Any comments would be welcome.

Notes:
  • You won't be able to do anything in the designer when the the class inherits the Plugin class because it's an abstract class, ya de yada.
  • If you have a textbox on your own plugin then you may want to ensure that it receives the attention that it's due i.e. handles backspace correctly by handling the GotFocus() event and calling the ParentFrame.SetFocus().
  • You can use the CLR Debugger (also part of the SDK) to run IE and find any bugs.

Usual disclaimers apply.
2/28/2006 5:01:01 PM (GMT Standard Time, UTC+00:00)  #      .net | c-sharp | DOM Helper | Inline CSS Editor  | 
 Friday, February 24, 2006
Well I've finally got round to producing the inline CSS editor that I wanted to do in the first place. The first stab, was in C++ and although it worked, it was a complete nightmare. It didn't allow you to alter CSS files that were loaded as "@import". This new version does, it parses the CSS and adds each individual rule back to the style sheet. Simply replacing the CSSText caused a memory corruption error in MSHTML.

It's been re-written it in C# using Pavel Zolnikov's BandObjects. I've also added a few extras such as a DOM Explorer and the ability to add plugins to the band object.

While it's been writting in C# 2.0 there's not much use of the new version 2 features. Mind I was most satisfied with my first foray into using generics. I didn't think that there'd be much use for them but I did find a use, albeit slightly contrived.

So you want to see the screen shot?



OK, so now you like the look of it, you want to know how to get it and play with it?

I really wanted to deploy this as with the proper installer however, C# Express doesn't include that so you going to have to install the file manually:

First of all download DOM Helper.

Extract the files in that archive to a location on your harddrive that you can remember (e.g. c:\DOMHelper\).

Next you'll need to regasm the assembly open a cmd shell ( Start -> Run -> cmd) and type:

"%windir%/Microsoft.Net/Framework/v2.0.50727/regasm" /codebase c:\DOMHelper\DOMHelper.dll

This should have registered the assembly, and the next time you open Internet Explorer you will be able to view DOM Helper by choosing it from View -> Explorer Bars -> DOM Helper.

If for any reason you don't like it to uninstall run the following command

"%windir%/Microsoft.Net/Framework/v2.0.50727/regasm" /u c:\DOMHelper\DOMHelper.dll


Thanks to www.famfamfam.com/lab/icons/silk/ for the icons

If you want to know more, then please let me know.

2/24/2006 2:32:05 PM (GMT Standard Time, UTC+00:00)  #      c-sharp | DOM Helper | Downloads | Inline CSS Editor  | 
 Thursday, February 12, 2004

Blimey, yesterday was busy, I had 10 times the amout of traffic coming to my lowly home. I must admit I'm grateful to Jon Galloway

Anyway I've managed to enable the backspace this was really annoying me, mainly because I can't seem to type more than a few characters without making a mistake, and secondly because it should have been something easily enabled.

Anyway the problem it seemed was that I wasn't capturing the correct details on IInputObject::TranslateAcceleratorIO closer examination led me to realise that this method wasn't even being called. After trying just about everything from implementing IOleControlSite to looking at subclassing IE to trap the VK_BACK message. I finally stumbled on what was causing the trouble, it was that the OnFocusChangeIS method wasn't being called and thus IE never thought that the CommandBar had focus. As soon as that was corrected everything started working. Thank you google.

Well, you can now get a fixed up version of CSSEdit here

I've now started to work on a method to allow edit the @import rule stylesheets

2/12/2004 5:42:38 AM (GMT Standard Time, UTC+00:00)  #      Inline CSS Editor  | 
 Thursday, February 05, 2004

Well after writing the last post I thought I'd give explorer bar writing another shot.

I've uploaded a version of the Explorer Bar. A screenshot is here It's only been tested on Windows XP running IE 6 and with the .net framework installed. If the bar doesn't work on your setup let me know. I'll be releasing the code along with an article describing how I wrote the object shortly.

There's a couple of issues with it that need resolving quickly most annoying of which is that Edit control doesn't capture the backspace keypress. And also you can't edit any stylesheets containing @import rules.

Personally I haven't started using @import yet so this isn't a major problem for me, this getting fixed will depend on feedback.

You can download CSSEdit here

Installation is a case of extracting the dll in the zip file and using regsvr32.dll to register it in the windows registry. Then to activate the explorer bar, launch a new session of Internet Explorer and from the menu View -> Explorer Bar -> Inline CSS Editor. Next browse to a webpage and when the page has loaded the css can be edited in realtime and the effects viewed instantly.

Enjoy

2/5/2004 10:05:19 AM (GMT Standard Time, UTC+00:00)  #      Inline CSS Editor  | 
Copyright © 2008 Rhys Jeremiah. All rights reserved.
DasBlog 'Portal' theme by Johnny Hughes.
Pick a theme: