How to inject CSS in WebBrowser control?
As per my knowledge,there is a way to inject javascript into the DOM. Below is the sample code that injects javascript with the webbrowser control:
HtmlElement head = webBrowser1.Document.GetElementsByTagName("head")[0];
HtmlElement scriptEl = webBrowser1.Document.CreateElement("script");
IHTMLScriptElement element = (IHTMLScriptElement)scriptEl.DomElement;
element.text = "function sayHello() { alert('hello') }";
head.AppendChild(scriptEl);
webBrowser1.Document.InvokeScript("sayHello");
Is there an easier way to inject css into the DOM?
Answer
I didn't try this myself but since CSS style rules can be included in a document using the <style> tag as in:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
you could try giving:
HtmlElement head = webBrowser1.Document.GetElementsByTagName("head")[0];
HtmlElement styleEl = webBrowser1.Document.CreateElement("style");
IHTMLStyleElement element = (IHTMLStyleElement)styleEl.DomElement;
IHTMLStyleSheetElement styleSheet = element.styleSheet;
styleSheet.cssText = @"h1 { color: red }";
head.AppendChild(styleEl);
a go. You can find more info on the IHTMLStyleElement here.
Edit
It seems the answer is much much simpler than I originally thought:
using mshtml;
IHTMLDocument2 doc = (webBrowser1.Document.DomDocument) as IHTMLDocument2;
// The first parameter is the url, the second is the index of the added style sheet.
IHTMLStyleSheet ss = doc.createStyleSheet("", 0);
// Now that you have the style sheet you have a few options:
// 1. You can just set the content as text.
ss.cssText = @"h1 { color: blue; }";
// 2. You can add/remove style rules.
int index = ss.addRule("h1", "color: red;");
ss.removeRule(index);
// You can even walk over the rules using "ss.rules" and modify them.
I wrote a small test project to verify that this works. I arrived at this final result by doing a search on MSDN for IHTMLStyleSheet, upon which I happened across this page, this page and this one.