C#: Best way to inject CSS into MSHTML instance?

Tom Corelis picture Tom Corelis · Apr 2, 2009 · Viewed 7.4k times · Source

I'm trying to inject some CSS that accompanies some other HTML into a C# managed WebBrowser control. I am trying to do this via the underlying MSHTML (DomDocument property) control, as this code is serving as a prototype of sorts for a full IE8 BHO.

The problem is, while I can inject HTML (via mydomdocument.body.insertAdjacentHTML) and Javascript (via mydomdocument.parentWindow.execScript), it is flat-out rejecting my CSS code.

If I compare the string containing the HTML I want to insert with the destination page source after injection, the MSHTML's source will literally contain everything except for the <style> element and its underlying source.

The CSS passes W3C validation for CSS 2.1. It doesn't do anything too tricky, with the exception that some background-image properties have the image directly embedded into the CSS (e.g. background-image: url("data:image/png;base64 ...), and commenting out those lines doesn't change the result.

More strangely (and I am not sure if this is relevant), was that I was having no problems with this last week. I came back to it this week and, after switching around some of the code that handles the to-be-injected HTML before actual injection, it no longer worked. Naturally I thought that one of my changes might somehow be the problem, but after commenting all that logic out and feeding it a straight string the HTML is still appearing unformatted.

At the moment I'm injecting into the <body> tag, though I've attempted to inject into <head> and that's met with similar results.

Thanks in advance for your help!

tom

Answer

Tom Corelis picture Tom Corelis · Apr 5, 2009

Ended up solving this myself:

mshtml.HTMLDocument test = (mshtml.HTMLDocument)webBrowser1.Document.DomDocument;

//inject CSS
if (test.styleSheets.length < 31) { // createStyleSheet throws "Invalid Argument if >31 stylesheets on page

    mshtml.IHTMLStyleSheet css = (mshtml.IHTMLStyleSheet)test.createStyleSheet("", 0);
    css.cssText = myDataClass.returnInjectionCSS(); // String containing CSS to inject into the page
        // CSS should now affect page

} else {
    System.Console.WriteLine("Could not inject CSS due to styleSheets.length > 31");
    return;
}

What I didn't realize is that createStyleSheet creates a pointer that is still 'live' in the document's DOM... therefore you don't need to append your created stylesheet back to its parent. I ended up figuring this out by studying dynamic CSS code for Javascript as the implementations are pretty much identical.