更吹落，星如雨 CefSharp源代码编译

更吹落，星如雨

CefSharp源代码编译

前几天在研究怎么定制CefSharp控件。CefSharp控件是一个封装了CEF(Chromium Embedded Framework)的 .NET类库，它可以实现一个简单浏览器的功能，可以在WPF/WinForms中使用。

其实CefSharp控件在C#层面已经把接口封装的不错了，很多功能可以直接使用。但是如果要扩展某些接口，则必须修改CEF或者Chromium里面的代码，再重新编译出CEF发行包，从CEF发行包制作成NuGet使用的nupkg文件。

开源项目的英文文档有些地方没有讲到，幸亏我是搞Chromium开发，不然真是坑死了。写篇文章总结一下。

编译CEF工程

因为开发CefSharp过程需要修改CEF内核的代码实现一些功能，而CEF代码又是基于Chromium的，所这里想讲一讲如何搭建CEF和Chromium的开发环境。

环境要求

1. 电脑网络需要能够翻墙，因为代码和相关的工具需要翻墙才能更新。
2. 系统至少是win7 x64或者更新的版本，因为Chromium不支持32位操作系统编译代码。因为需要Win 8.1 SDK，所以使用win 8.1系统比较合适。
3. 电脑需要安装 Visual Studio 2013 Update 4，目前Chromium只支持这个版本的VS编译代码。
4. 电脑至少8GB内存，否则可能链接不成功。
5. 获取下来的CEF和Chromium代码有10GB左右大小，编译的中间文件有40GB大小，请确保有80GB的硬盘剩余空间。
6. 为了加快编译速度，建议使用SSD固态硬盘。
7. 目前我电脑的硬件是i7 4790K CPU,32GB DDR3内存，固态硬盘，这样的配置编译一次CEF代码的Release版需要75分钟。

设置系统区域

默认的中文操作系统系统区域设置的值为“中文(简体，中国)”，但是这样的区域设置编译CEF代码无法通过，需要把系统区域设置成“英语（美国）”。打开“控制面板”，点开“区域”->“管理”，点击“更改系统区域设置”，把”区域设置”更改成“英语(美国)”。更改完成之后需要重启一次电脑。重启完电脑再确认一下是否更改成功。

安装配置Depot Tools工具

CEF和Chromium工程是靠Depot Tools工具来管理源代码的，所以需要先安装Depot Tools工具。
Chromim安装 Depot Tools工具的教程如下：http://commondatastorage.googleapis.com/chrome-infra-docs/flat/depot_tools/docs/html/depot_tools_tutorial.html#_setting_up 。

从上面这个教程里总结到以下简单步骤：

1. 从这里下载Depot Tools安装包 https://src.chromium.org/svn/trunk/tools/depot_tools.zip 。
2. 把下载好的安装包解压到一个英文路径的目录，比如E:depot_tools。
3. 将E:depot_tools路径加入到系统的环境变量Path中。
4. 配置Depot Tools中的git工具。打开cmd，按照以下规则运行以下命令：
   
   1 2 3 4 5

   $ git config -- global user . name "John Doe" $ git config -- global user . email "jdoe@email.com" $ git config -- global core . autocrlf false $ git config -- global core . filemode false $ git config -- global color . ui true

获取CEF代码

CEF工程已经为我们提供了一个automate-git.py脚本来更新代码，下载地址是：https://bitbucket.org/chromiumembedded/cef/raw/master/tools/automate/automate-git.py 。

在E盘建立一个cef目录，把下载的automate-git.py文件放在这个目录。并在这个cef目录下建立一个名为3.2454.1344_update.bat的文件，其文件中内容如下：

1 2 3 4 5 6

set GYP_GENERATORS = ninja , msvs - ninja set GYP_MSVS_VERSION = 2013 set GYP_DEFINES = disable_nacl = 1 set DEPOT_TOOLS_WIN_TOOLCHAIN = 0 python automate - git . py -- download - dir = "E:/cef/download" -- branch = 2454 -- no - build -- depot - tools - dir = "E:/depot_tools" pause

在cmd中运行3.2454.1344_update.bat批处理文件就会自动获取代码以及对应的开发工具。获取到的代码会放到E:cefdownload目录。

注意：CefSharp未来不再支持xp系统了，目前支持xp系统的最新CefSharp版本是3.2454.1344，基于的Chromium版本是45，所以我们编译的对应CEF代码分支是2454。参见这个文档https://github.com/cefsharp/CefSharp/wiki/Windows-XP-No-Longer-Supported 。

运行3.2454.1344_update.bat更新的代码大小10GB左右，还需要网络能够翻墙，所以持续的时间很长，如果中间有失败，可能需要重新开始。

编译CEF代码

更新好CEF代码后，就可以编译了。在E:cef目录建立一个名为3.2454.1344_all.bat的文件，其内容如下：

1 2 3 4 5 6

set GYP_GENERATORS = ninja , msvs - ninja set GYP_MSVS_VERSION = 2013 set GYP_DEFINES = disable_nacl = 1 set DEPOT_TOOLS_WIN_TOOLCHAIN = 0 python automate - git . py -- download - dir = "E:/cef/download" -- branch = 2454 -- force - distrib -- force - build    -- depot - tools - dir = "E:/depot_tools" pause

在cmd中运行3.2454.1344_all.bat，就开始编译CEF，这个过程需要编译debug和release版本，每次需要编译大概14000个文件，总共编译时间为3小时左右。
最终编译出的E:cefdownloadchromiumsrccefbinary_distribcef_binary_3.2454.1344.g2782fb8_windows32.zip就是我们所需要的。

生成nupkg包

一般情况下使用CefSharp控件，是用nuget程序包管理工具来获取对应的nupkg包，然后自动添加到c#工程中。因为我们自己定制CefSharp，则是自己生成nupkg，然后手动添加到c#工程中。
CefSharp的WPF程序最终发布使用，依赖以下5个nupkg包：

1. cef.redist.x86.3.2454.1344.nupkg，32位程序CEF nupkg包。
2. cef.redist.x64.3.2454.1344.nupkg，64位程序CEF nupkg包。这个64位包是可选的，目前我们构造的都是32程序，不使用这个包。但是因为内部依赖关系，还是带上这个包。
3. cef.sdk.3.2454.1344.nupkg，CefSharp中间工程依赖这个包。
4. CefSharp.Common.45.0.0.nupkg，CefSharp控件基础nupgk包。
5. CefSharp.Wpf.45.0.0.nupkg，CefSharp控件WPF nupgk包。构建WPF程序需要依赖这个包。

生成CEF nupkg包

我们先来生成CEF nupkg包，这个需要根据cef-binary项目https://github.com/cefsharp/cef-binary 来操作。
我们先获取到cef-binary项目代码到E:githubcef-binary目录。然后把编译生成的CEF binary_distribcef_binary_3.2454.1344.g2782fb8_windows32.zip解压到E:githubcef-binarycef_binary_3.y.z_windows32目录。因为实际上我只需要32位nupkg包，所以我们没有在CEF工程中编译64位CEF模块，我们直接去CEF builds网站下载64位的发行包。同理，把这个下载的发行包文件解压放到cef_binary_3.y.z_windows64目录。
然后用PowerShell来运行E:githubcef-binarybuild.ps1文件。这一步可能会失败，提示NuGet.exe错误。原因是%AppData%LocalNuGetNuGet.exe是错误的，这个需要拷贝一个正常NuGet.exe文件到那个目录。
运行完E:githubcef-binarybuild.ps1，会在E:githubcef-binaryNuGet目录生成以下几个文件：

1. cef.redist.x64.3.2454.1344.nupkg
2. cef.redist.x86.3.2454.1344.nupkg
3. cef.sdk.3.2454.1344.nupkg

生成CefSharp nupkg包

我们先获取CefSahrp项目的代码https://github.com/cefsharp/CefSharp 。然后配置NuGet.config的依赖nupkg包到cef-binary工程生成的nupkg包目录。然后用vs打开E:githubCefSharpCefSharp3.sln，开始编译工程。这一步会自动使用我们生成的nupkg包。
编译CefSharp3.sln成功之后，在用PowerShell打开E:githubCefSharpbuild.ps1文件，这一步会生成以下nupkg文件：

1. CefSharp.Common.45.0.0.nupkg
2. CefSharp.OffScreen.45.0.0.nupkg
3. CefSharp.WinForms.45.0.0.nupkg
4. CefSharp.Wpf.45.0.0.nupkg

其中，CefSharp.Common.45.0.0.nupkg和CefSharp.Wpf.45.0.0.nupkg是我们所需要的。

使用nupkg包

配置本地程序包源

把cef-binary和CefSharp工程生成的nupkg文件放到一个目录，比如E:oschinaCefSharpLocal-package-source目录。建立一个Wpf工程WpfApplicationDemo。然后从“工具”->“NuGet程序包管理器”->“程序包管理器设置”打开设置，选择“程序包源”，如图：

我们设置添加一个本地的nupgk源，叫做“Local-package-source”，它的源地址是E:oschinaCefSharpWpfApplicationDemo..Local-package-source，源地址目录存放的是我们之前生成的那些nupgk文件。并且把我们的源放到第一位，在系统默认的nuget.org前面。这么做的理由是系统默认的nuget.org源里面也有CefSharp等控件，会覆盖掉我们本地的CefSharp控件，从而导致功能不生效。

使用CefSharp.Wpf控件

这里有篇文档介绍如何使用CefSharp.Wpf控件，http://www.codeproject.com/Articles/881315/Display-HTML-in-WPF-and-CefSharp-Tutorial-Part 。
我以WpfApplicationDemo为例子简单介绍一下。
首先设置工程的配置管理器。从Any CPU的配置拷贝过来，新建一个x86的配置，然后项目的工程选择成x86。然后编辑代码，打开MainWindow.xaml文件，编辑以下代码：

1 2 3 4 5 6 7 8 9 10

< Window x : Class = "WpfApplicationDemo.MainWindow"          xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns : x = "http://schemas.microsoft.com/winfx/2006/xaml"          xmlns : cefSharp = "clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"          Title = "MainWindow" Height = "350" Width = "525" >      < Grid >          < cefSharp : ChromiumWebBrowser Grid . Row = "0"          Address = "https://www.baidu.com/" / >      < / Grid > < / Window >

红色部分代码是我们新加的。我们代码中添加了cefSharp控件，并且打开了https://www.baidu.com/ 。

编译工程，就会根据依赖自动安装CefSharp.Wpf控件。我们打开NuGet程序包管理器，选择已安装的包，如图：

选择CefSharp.Wfp包，可以看到创建者是http://blog.gclxry.com/ ，则表明我们正确的使用了我们自己生成的包。

运行工程，可以看到界面如下图所示：