C# WebBrowser + Chrome 크롬 브라우저 사용하기 (cefSharp / Chromium)

기본 C#에서 제공하는 WebBrowser를 이용하면, 제품의 성능이 매우 떨어지는 편입니다.

그리고, 추가로 해당 meta태그를 추가해줘야 잘 랜더링이 된다.

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

출처: http://stackoverflow.com/questions/25142594/allowing-javascript-to-run-on-a-windows-form-web-browser

그래서 C#에 크롬 브라우저를 넣는 방법을 이용하는 경우가 있는데, 

메모해 둔다.

[ 임베이드 크롬 브라우저 Chromium Embedded Framework (CEF) ]

CefSharp 라이브러리

공식 사이트: https://github.com/cefsharp/CefSharp

블로그: http://cefsharp.github.io/

The Chromium Projects 사이트: https://www.chromium.org/Home

CEF Sharp 신규 기능 블로그: http://cefsharp.github.io/  

 (새롭게 추가된 기능에 대한 POST 블로그) 

크롬의 초기 엔진 = WebKit: https://webkit.org/

[ 추천 - 튜토리얼 ] 

http://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application

(주의)  .Net 4.5.2 이상이 필요합니다.

.NET Framework 4.5.2  >> https://www.microsoft.com/net/targeting

.NET Framework 4.5.2 Developer Pack를 설치한다. 

(Developer Pack이 아니면, .NET 4.6이 깔려 있다면 깔리지 않습니다.) 

(이슈 1) 

video type="video/mp4"태그에 mp4는 지원되지 않는듯한 느낌이 듭니다. 

아마도 mp4 코덱의 SW 구매 비용이 들기에, SW 저작권 때문이 아닐까? 싶네요.

(완전 개인추측, 시간되면 찾아봐야 할듯 -_-;; ) 

(이슈 2) 

SW용량이 너무 커집니다. 

CefSharp와 form1 빌드 했을뿐인데, 

126MB가 나왔습니다. (3/9/2017)

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

// for CefSharp Lib

using CefSharp;

using CefSharp.WinForms;

namespace CefSharpSample

{

    public partial class Form1 : Form

    {

        public ChromiumWebBrowser chromeBrowser;

        public Form1()

        {

            InitializeComponent();

            // start Cef

            InitializeChromium();

        }

        private void InitializeChromium()

        {

            CefSettings settings = new CefSettings();

            

            // Init Cef with the provided settings

            Cef.Initialize(settings);

            // Create a browser componet

            // and provide a start web URL

            chromeBrowser = new ChromiumWebBrowser("http://help.snowsharp.com/snowpos");

            this.Controls.Add(chromeBrowser);

            chromeBrowser.Dock = DockStyle.Fill;

        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)

        {

            Cef.Shutdown();

        }

    }

}

[ C# 윈폼 앱에 CefSharp 오프소스 웹브라우저를 사용하기 ] 

원문: http://printhelloworld.tistory.com/25

1) 윈폼 프로젝트 생성

2) NuGet ( Solution -> Configuration Manager , 프로젝트를 AnyCPU에서 x86 또는 x64로 변경)

- 직접 복사하는 방식은 해당 URL에서 참고

3) Form에 코드 추가하기 ( Form -> View Code)

using CefSharp;
using CefSharp.WinForms; 

public ChromiumWebBrowser browser;
public void InitBrowser(){
    Cef.Initialize(new CefSettings());
    browser = new ChromiumWebBrowser ("www.google.com");
    this.Controls.Add(browser);
    browser.Dock = DockStyle.Fill;
}

public Form1() {
     //....
     InitializeComponent() 
     InitBrowser()
}

# GitHub 

: https://github.com/cefsharp/CefSharp

CefSharp lets you embed Chromium in .NET apps. It is a lightweight .NET wrapper 
around the Chromium Embedded Framework (CEF) by Marshall A. Greenblatt. 
About 30% of the bindings are written in C++/CLI with the majority of code here is C#. 
It can be used from C# or VB, or any other CLR language. CefSharp provides both WPF 
and WinForms web browser control implementations.

https://cefsharp.github.io/

- Full Web Browser in your C# App

- HTML5, JavaScript and PDF supported

- Deep Integration

- Warp-drvice Performance

- Free and Open Source

- Multiple Flavors : CefSharp.WinForms, CefSharp.WPF

- Documented and Supported

원문 : http://www.codeproject.com/Tips/1058700/Embedding-Chrome-in-your-Csharp-App-using-CefSharp

[ CefSharp: Quick Guide for C# ]

쿽 가이드 튜토리얼

http://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application

http://docs.telerik.com/devtools/winforms/pdfviewer/overview

https://github.com/cefsharp/CefSharp/wiki/Quick-Start

https://github.com/cefsharp/CefSharp

---

[ Web브라우저와 HTTP서버 내장]

WebBrowserEx: WinForms WebBrowser + HTTP Server

(작업자) http://simplygenius.net/Article/WebBrowserEx

WebBrowserEx_src.zip

WebBrowserEx_demo.zip

WebBrowserEx - Extended WebBrowser Control

MS의 WebBrowerEx (2010년이 마지막;;)

https://webbrowserex.codeplex.com/ 

using Common;//WebBrowserEx

..

    public partial class frmHelpDocument : Form

    {

        WebBrowserEx _Browser = null;

        

   public frmHelpDocument()

        {

            InitializeComponent();

            _Browser = new WebBrowserEx();

            _Browser.Dock = DockStyle.Fill;

            _Browser.TabIndex = 1;

            radPanel1.Controls.Add(_Browser);

        }

        private void frmHelpDocument_Load(object sender, System.EventArgs e)

        {

            //webBrowser1.Navigate(new System.Uri(Application.StartupPath + @"\Test.Html"));

            

           // 브라우저 실행 

 string url = "http://help.snowsharp.com/snowpos/";

            try

            {

                _Browser.Navigate(url);

            }

            catch (System.UriFormatException)

            {

                return;

            }

 // 시스템에 있는 IE 사용하기

            //System.Diagnostics.Process.Start("iexplore.exe", url); //내장 IE실행하기

        }

---

[ OS 내장되어 있는 IE 호출하기 ]

해당 방법은 비추하는 방법입니다.

string URL = "http://google.com";
object browser; 
browser = System.Diagnostics.Process.Start("iexplore.exe", URL)

출처: http://stackoverflow.com/questions/5716662/how-to-use-the-net-webbrowser-object

[ PdfViewer ]

http://docs.telerik.com/devtools/winforms/pdfviewer/overview

[ meta 태그의 내용 ]

What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?

 출처: http://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do

October 2015 Update

This answer was posted several years ago and now the question really should be should you even consider using the X-UA-Compatible tag on your site with the changes Microsoft has made to its browsers (more on those below).

Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE 9 or IE 8, then I would recommend using the tag. If you only support the latest browsers (IE 11 and/or Edge) then I would consider dropping this tag altogether. Additional info below:

---

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. IE11 has made changes to these modes; see the IE11 note below. Microsoft Edge, the browser that will be released after IE11, will only honor the X-UA-Compatible meta tag in certain circumstances. See the Microsoft Edge note below.

According to Microsoft, when using the X-UA-Compatible tag, it should be as high as possible in your document head:

If you are using the X-UA-Compatible META tag you want to place it as close to the top of the page's HEAD as possible. Internet Explorer begins interpreting markup using the latest version. When Internet Explorer encounters the X-UA-Compatible META tag it starts over using the designated version's engine. This is a performance hit because the browser must stop and restart analyzing the content.

Here are your options:

• "IE=edge"
• "IE=11"
• "IE=EmulateIE11"
• "IE=10"
• "IE=EmulateIE10"
• "IE=9"
• "IE=EmulateIE9
• "IE=8"
• "IE=EmulateIE8"
• "IE=7"
• "IE=EmulateIE7"
• "IE=5"

To attempt to understand what each means, here are definitions provided by Microsoft:

Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

• Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9. Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

• IE11 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.

• IE10 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.

• IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others. [Editor Note: IE 9 does not support CSS3 animations].

• IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.

• IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a directive.

• Emulate IE9 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the directive.

• Emulate IE8 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the directive.

• Emulate IE7 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the directive. For many web sites, this is the preferred compatibility mode.

• IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Microsoft Internet Explorer 5.

IE 10 NOTE: As of Internet Explorer 10, quirks mode behaves differently than it did in earlier versions of the browser. In Windows Internet Explorer 9 and earlier versions, quirks mode restricted the webpage to the features supported by Microsoft Internet Explorer 5.5. In Internet Explorer 10, quirks mode conforms to the differences specified in the HTML5 specification.

Personally, I always choose the http-equiv="X-UA-Compatible" content="IE=edge" meta tag, as older versions have plenty of bugs, and I do not want IE to decide to go into "Compatibility mode" and show my site as IE7 vs IE8 or 9. I always prefer the latest version of IE.

IE 11

From Microsoft:

Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.

Use the HTML5 document type declaration to enable edge mode:

<!doctype html>

Edge mode was introduced in Internet Explorer 8 and has been available in each subsequent release. Note that the features supported by edge mode are limited to those supported by the specific version of the browser rendering the content.

Starting with IE11, document modes are deprecated and should no longer be used, except on a temporary basis. Make sure to update sites that rely on legacy features and document modes to reflect modern standards.

If you must target a specific document mode so that your site functions while you rework it to support modern standards and features, be aware that you're using a transitional feature, one that may not be available in future versions.

If you currently use the x-ua-compatible header to target a legacy document mode, it's possible your site won't reflect the best experience available with IE11.

Microsoft Edge (Replacement for Internet Explorer that comes bundled with Windows 10)

Information on X-UA-Compatible meta tag for the "Edge" version of IE. From Microsoft:

Introducing the “living” Edge document mode

As we announced in August 2013, we are deprecating document modes as of IE11. With our latest platform updates, the need for legacy document modes is primarily limited to Enterprise legacy web apps. With new architectural changes, these legacy document modes will be isolated from changes in the “living” Edge mode, which will help to guarantee a much higher level of compatibility for customers who depend on those modes and help us move even faster on improvements in Edge. The next major version of IE will still honor document modes served by intranet sites, sites on the Compatibility View list, and when used with Enterprise Mode only.

Public Internet sites will be rendered with the new Edge mode platform (ignoring X-UA-Compatible). It is our goal that Edge is the "living" document mode from here out and no further document modes will be introduced going forward.

With the changes in Microsoft Edge to no longer support document modes in most cases, Microsoft has a tool to scan your site to check and see if it has code that is not compatible with Edge.

Chrome=1 Info for IE

There is also chrome=1 that you can use or use together with one of the above options, EX: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> chrome=1 is for Google's Chrome Frame which is defined as:

Google Chrome Frame is an open source browser plug-in. Users who have the plug-in installed have access to Google Chrome's open web technologies and speedy JavaScript engine when they open pages in the browser.

Google Chrome Frame seamlessly enhances your browsing experience in Internet Explorer. It displays Google Chrome Frame enabled sites using Google Chrome’s rendering technology, giving you access to the latest HTML5 features as well as Google Chrome’s performance and security features without in any way interrupting your usual browser usage.

When Google Chrome Frame is installed, the web just gets better without you having to think about it.

But for that plug-in to work you must use chrome=1 in the X-UA-Compatible meta tag.

More info on Chrome Frame can be found here.

Note: Google Chrome Frame only works for IE6 through IE9, and was retired on February 25, 2014. More info can be found here. Thank You @mck for the link.

Validation:

HTML5:

The page will validate using the W3 Validator only when using <meta http-equiv="X-UA-Compatible" content="IE=Edge">. For other values it will throw the error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge. In other words, if you have IE=edge,chrome=1 it will not validate. I ignore this error completely as modern browsers simply ignore this line of code.

If you must have completely valid code then consider doing this on the server level by setting HTTP header. As a note, Microsoft says, If both of these instructions are sent (meta and HTTP), the developer's preference (meta element) takes precedence over the web server setting (HTTP header). See olibre's answer or bitinn's answer for more details on how to set an HTTP header.

XHTML

There isn't an issue with validation when using <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> as long as the tag is properly closed, IE: /> vs >

---

For more information on X-UA-Compatible see Microsoft's Website Defining Document Compatibility.

For more information on what IE supports see the website caniuse.com