How to inject CSS in WebBrowser control?

Question

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?

score 32 · Accepted Answer · edited Dec 17 '16 at 04:44

32

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.

edited Dec 17 '16 at 04:44

Logos

366
3
19

answered Mar 31 '11 at 07:39

paracycle

7,665
1
30
34

paracycle, the intellisense of element, doesn't have .text .. thats why im scratching my head right now... :( – DEN Mar 31 '11 at 09:03
Yes, having another look at the reference document, it seems there is another layer in between. I changes the code snippet to conform to that. I don't have an environment to test the code right now, so please comment on your results. – paracycle Mar 31 '11 at 12:38
there are no IHTMLStyleSheetElement but do have IHTMLStyleSheet and i have tried using IHTMLStyleSheet. It throw NullReferenceException error, styleSheet is not set to an instance of an object. The element's style sheet is null. :( – DEN Apr 01 '11 at 02:46
I will setup a test environment and update my answer accordingly. It is probably a simple matter of creating a mew HTMLStyleSheet element. – paracycle Apr 01 '11 at 04:48
Thanks paracycle. I find no where to append css in . Looking forward for your answer. :) – DEN Apr 01 '11 at 05:41
5

Two things. First: Please mention referenced assemblies and using statements. Otherwise it is hard to use your code. Second: In the first line it has to be `IHTMLDocument2` at the end and not `HTMLDocument2`. The assembly to add is MSHTML (Microsoft HTML Object Library). And then add `using mshtml;`. – Robert S. Nov 29 '16 at 10:14
@RobertS.: I've edited the answer to reflect your comment :) – Logos Dec 16 '16 at 22:09
@Logos: Thanks :) – Robert S. Dec 18 '16 at 13:31

score 1 · Answer 2 · answered Dec 08 '18 at 00:29

For me it seemed to be as simple as setting my style first in the DocumentText. Obviously not best practices but it works for simple CSS.

webBrowser1.DocumentText = "<style> " +
                                 "body { " +
                                    "font-family: Algerian; " +
                                  "} " +
                            "</style> "+
                            "<a href='https://www.google.ca'>Test</a>";

How to inject CSS in WebBrowser control?

2 Answers2

Edit

Linked