Building an IE Add-On - Part 3

So far in our effort to create an Internet Explorer add-on, we've successfully ran a proof-of-concept and then refactored a little to add some site-specific logic.  This time we'll take another small step along and push that logic into an interface and set the stage for some more complicated behaviours.

Since we already have an appropriate method from last time, we just need to define our interface and our first implementation:

    interface ICssRepository {
        string GetCssText(string url);
    }

    class HardcodedCssRepository : ICssRepository {
        public string GetCssText(string url) {
            var uri = new Uri(url);
            switch (uri.Host.ToLowerInvariant()) {
                case "www.bing.com":
                    return "a{ color:red !important; }";
                case "www.google.co.uk":
                    return "a{ color:purple !important; }";
            }
            return null;
        }
    }

With those in place we can start to wire it up, first adding a reference which for now is set by the constructor...

        private readonly ICssRepository _cssRepository;
        public BHO() {
            _cssRepository = new HardcodedCssRepository();
        }

... and then updating our event handler to call into our new interface instead, slightly cleaning the code by casting the event parameters to something useful ...

        void _webBrowser2Events_DocumentComplete(object pDisp, ref object URL) {

            if (pDisp is IWebBrowser2 && URL is string)
                OnDocumentCompleted((IWebBrowser2)pDisp, (string)URL);

        }

        void OnDocumentCompleted(IWebBrowser2 webBrowser2, string url) {
            //grab the css text for the document url
            var cssText = _cssRepository.GetCssText(url);
            if (cssText == null) return;

            //add the css text
            HTMLDocument document = webBrowser2.Document;
            var css = document.createStyleSheet("", 0);
            css.cssText = cssText;
        }

Next up, we'll move away from hardcoded styles and experiment with an alternative storage format...

Building an IE Add-On - Part 2

Picking up from my previous post Site-specific stylesheets in Internet Explorer, we have a registered browser add-on that forces every website to have links appearing in red.

The next step is adding something that could be argued to be site-specific behaviour, so we first need to figure out how we'll match a website against our custom styles.  As we don't have a nice conditional syntax (@-moz-document domain(bing.com){...}) we'll go with the simplest possible thing for now, and have zero or one stylesheet per site.

Putting that into code we get the following:

        void _webBrowser2Events_DocumentComplete(object pDisp, ref object URL) {
            //grab the document
            HTMLDocument document = _webBrowser2.Document;

            //grab the css text for the document url
            var cssText = GetCssText(document.url);
            if (cssText == null) return;

            //add the css text
            var css = document.createStyleSheet("", 0);
            css.cssText = cssText;
        }

        static string GetCssText(string url) {
            var uri = new Uri(url);
            switch(uri.Host.ToLowerInvariant()) {
                case "www.bing.com":
                    return "a{ color:red !important; }";
                case "www.google.co.uk":
                    return "a{ color:purple !important; }";
            }
            return null;
        }

Which now only affects bing and google, with google now using purple for links.  Definitely an improvement and another step towards site-specific stylesheets.

Site-specific stylesheets in Internet Explorer

Stylish has been one of my favourite Firefox add-ons for years - having the ability to tweak the appearance of a website certainly helps when faced with small white text on a black background or perhaps where just a little too much space is wasted on padding.

So it was that a few hours ago I went looking, unsuccessfully, for an equivalent on Internet Explorer.  In the end, I found a great article on Writing a Managed Internet Explorer Extension and decided to implement the functionality myself.

After a few minutes work we have a nice proof of concept.  Following through the article, all we need to do is add a few lines of code that adds a new stylesheet to the document and we have the foundation for site-specific stylesheets:

        void _webBrowser2Events_DocumentComplete(object pDisp, ref object URL) {
            HTMLDocument document = _webBrowser2.Document;
            var css = document.createStyleSheet("", 0);
            css.cssText = "a{ color:red !important; }";
        }

Which gives us the admittedly backwards experience of forcing all links to be red...

Next up, another step closer with actual site-specific stylesheets.

Light field goodness

If you haven't already seen it following the recent tech previews, lytro's light field camera is definitely worth a look.  I must admit to not having heard of light field captures before, but frankly I'm sold... I wonder if it has scope to shrink to a mobile-phone friendly size?

I can't play with one yet as they don't ship until 2012 but would love to see what the limits are - could it finally fulfill the promise of those silly CSI moments where they magnify and magically coax a pinsharp image from some nasty CCTV footage?  Forget consumer point-and-shoot, light field is just perfect for that - a situation where you truly don't know where the point of interest may be, and possibly have no way of controlling it anyway?