如何在 Winforms 应用程序中使用 CefSharp（chromium embedded framework c#）（入门篇）

目录

1:chromium embedded framework c#简介

2：CefSharp的安装

3：CefSharp实现代码片段

        1.实现打开现有网址，在 Form1.cs 中添加如下代码；

        2.使用CEF（作为用户界面）

​4.总结

---

1:chromium embedded framework c#简介

 CefSharp，简单来说就是一款.Net编写的浏览器包，方便你在Winform和WPF中内嵌的Chrome浏览器组件。它支持HTML5。
CefSharp的功能比较复杂，以下只介绍一些我觉得比较重要的并且目前经常用的功能。

CefSharp 是将功能齐全的符合标准的 Web 浏览器嵌入到 C# 或 VB.NET 应用程序中的最简单方法。CefSharp 具有用于 WinForms 和 WPF 应用程序的浏览器控件，以及用于自动化项目的无头（屏幕外）版本。CefSharp 基于 Chromium Embedded Framework，即 Google Chrome 的开源版本。

您可以将 CefSharp用作浏览器组件，而不是依赖于您的用户在 Windows 上安装的 Internet Explorer 版本，也可以用作应用程序的预定义用户界面。是的，您可以在 winforms c# 应用程序中使用 HTML 控件（按钮、输入），并根据需要使用 CSS 进行自定义（引导等）

2：CefSharp的安装

CefSharp的安装过程如下：

1. 打开Visual Stduio，新建一个Windows窗体应用（.NET Framework）；
2. 点击项目鼠标右键，再点击"管理NuGet程序包"；
3. 搜索“CefSharp.WinForms”进行安装，因为创建的项目是winform项目所以选择CefSharp.WinForms，安装的时候需要选择版本，我选择的版本是 --75.1.143；
4. 早期版本的CefSharp不能在“Any CPU”平台上运行，需要配置。打开“配置管理器”； 
5. 新建“x86”和“x64”两个平台。从理论上来说使用x86或者x64平台都行，但由于之后要使用编译好的支持h264的x86内核，因此此处选择x86平台；
6. 最后，修改App.config文件，它在 Visual Studio 中项目的解决方案资源管理器中可见，并在配置标签中添加以下标签：

<runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
        <probing privatePath="x86"/>
    </assemblyBinding>
</runtime>

 然后，您的配置文件将如下所示：

 3：CefSharp实现代码片段

        1.实现打开现有网址，在 Form1.cs 中添加如下代码；

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;

namespace Cefsharp1
{
    public partial class Form1 : Form
    {
        public ChromiumWebBrowser chromeBrowser;

        public Form1()
        {
            InitializeComponent();
            // Start the browser after initialize global component
            InitializeChromium();
        }
        public void InitializeChromium()
        {
            CefSettings settings = new CefSettings();
            // Initialize cef with the provided settings
            Cef.Initialize(settings);
            // Create a browser component
            chromeBrowser = new ChromiumWebBrowser("https://www.baidu.com");
            // Add it to the form and fill it to the form window.
            this.Controls.Add(chromeBrowser);
            chromeBrowser.Dock = DockStyle.Fill;
        }
        private void Form1_Load_1(object sender, EventArgs e)
        {
            //chromeBrowser.ShowDevTools();
        }
    }
}

 运行结果如下：

form1页面上便可以打开百度的地址了； 

        2.使用CEF（作为用户界面）

上面已经将CefSharp 实现为浏览器组件。但你可以做的不止这些，现在我们将使用本地文件实现一个纯 HTML、Javascript 和 CSS（引导）UI，并用它来操作系统的东西。

我们需要在 Visual Studio 项目中包含我们的 HTML 资产。您可以直接从 Visual Studio 或 Windows 资源管理器创建它们，但通过 Visual Studio 更容易，因为该文件夹会自动添加到项目资源中。

在这种情况下，我们将使用一个简单的 Bootstrap 接口 （包括 bootstrap 和 jQuery），它包含在以下目录中：

重要提示：打开本地文件的时候需要对所有文件进行一下操作

• 选择html,js,css文件夹内的所有资源。
• 在底部将“复制到输出目录"值设置为"始终复制"。并且将html文件的生成操作改成嵌入的资源

 

 做完上述操作之后再项目中新建一个类，代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using CefSharp;
using CefSharp.WinForms;
using System.Diagnostics;

namespace Cefsharp1
{
    class CefCustomObject
    {
        // Declare a local instance of chromium and the main form in order to execute things from here in the main thread
        private static ChromiumWebBrowser _instanceBrowser = null;
        // The form class needs to be changed according to yours
        private static Form1 _instanceMainForm = null;


        public CefCustomObject(ChromiumWebBrowser originalBrowser, Form1 mainForm)
        {
            _instanceBrowser = originalBrowser;
            _instanceMainForm = mainForm;
        }

        public void showDevTools()
        {
            _instanceBrowser.ShowDevTools();
        }

        public void opencmd()
        {
            ProcessStartInfo start = new ProcessStartInfo("cmd.exe", "/c pause");
            Process.Start(start);
        }
    }
}

这个类会在 Javascript 中公开，后面你可以看到非常基础，展示了 chrome 浏览器的开发工具，并启动了一个 cmd.exe 进程。

现在我们的InitializeChromium函数应该如下所示：form1代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;

namespace Cefsharp1
{
    public partial class Form1 : Form
    {
        public ChromiumWebBrowser chromeBrowser;

        public Form1()
        {
            InitializeComponent();
            // Start the browser after initialize global component
            InitializeChromium();
            // Register an object in javascript named "cefCustomObject" with function of the CefCustomObject class :3

        }

        private void Form1_Load(object sender, EventArgs e)
        {
            chromeBrowser.ShowDevTools();
        }

        public void InitializeChromium()
        {
            CefSettings settings = new CefSettings();

            // Note that if you get an error or a white screen, you may be doing something wrong !
            // Try to load a local file that you're sure that exists and give the complete path instead to test
            // for example, replace page with a direct path instead :
            // String page = @"C:\Users\SDkCarlos\Desktop\afolder\index.html";

            //String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
            String page = @"D:\c\GZH\Cefsharp1\html-resources\html\index.html";

            if (!File.Exists(page))
            {
                MessageBox.Show("Error The html file doesn't exists : " + page);
            }

            // Initialize cef with the provided settings
            Cef.Initialize(settings);
            // Create a browser component
            chromeBrowser = new ChromiumWebBrowser(page);

            // Add it to the form and fill it to the form window.
            this.Controls.Add(chromeBrowser);
            chromeBrowser.Dock = DockStyle.Fill;

            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            chromeBrowser.BrowserSettings = browserSettings;
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            chromeBrowser.RegisterJsObject("cefCustomObject", new CefCustomObject(chromeBrowser, this));
        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            Cef.Shutdown();
        }

        private void Form1_Load_1(object sender, EventArgs e)
        {
            //chromeBrowser.ShowDevTools();
        }
    }
}

启动时会访问：D:\c\GZH\Cefsharp1\html-resources\html\index.html

index.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>
        cef启动了本地文件：
        启动时会访问：D:\c\GZH\Cefsharp1\html-resources\html\index.html
    </h1>
    <button class="btn btn-info" onclick="cefCustomObject.showDevTools();">Open Chrome Dev Tools</button>
    <button class="btn btn-primary" onclick="cefCustomObject.opencmd();">Open cmd.exe</button>
</body>
</html>

 运行结果如下：

因为不是网页所以调试工具用这种方式打开：

也可以访问本地cmd窗口：

4.总结

 近期因为工作需要简单尝试了一下CefSharp，上面只是初步的使用，具体还需要进一步研究，还有发现最新版本的CefSharp使用上述方式打开本地文件时会报错，还需要进一步探索