更吹落，星如雨 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的開發環境。
環境要求
- 電腦網路需要能夠翻牆，因為程式碼和相關的工具需要翻牆才能更新。
- 系統至少是win7 x64或者更新的版本，因為Chromium不支援32位作業系統編譯程式碼。因為需要Win 8.1 SDK，所以使用win 8.1系統比較合適。
- 電腦需要安裝 Visual Studio 2013 Update 4，目前Chromium只支援這個版本的VS編譯程式碼。
- 電腦至少8GB記憶體，否則可能連結不成功。
- 獲取下來的CEF和Chromium程式碼有10GB左右大小，編譯的中間檔案有40GB大小，請確保有80GB的硬碟剩餘空間。
- 為了加快編譯速度，建議使用SSD固態硬碟。
- 目前我電腦的硬體是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 。
從上面這個教程裡總結到以下簡單步驟：
- 從這裡下載Depot Tools安裝包 https://src.chromium.org/svn/trunk/tools/depot_tools.zip 。
- 把下載好的安裝包解壓到一個英文路徑的目錄，比如E:depot_tools。
- 將E:depot_tools路徑加入到系統的環境變數Path中。
- 配置Depot Tools中的git工具。開啟cmd，按照以下規則執行以下命令：
12345 $git config--globaluser.name"John Doe"$git config--globaluser.email"[email protected]"$git config--globalcore.autocrlf false$git config--globalcore.filemode false$git config--globalcolor.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的檔案，其內容如下：
| 123456 | set GYP_GENERATORS=ninja,msvs-ninjaset GYP_MSVS_VERSION=2013set GYP_DEFINES=disable_nacl=1set DEPOT_TOOLS_WIN_TOOLCHAIN=0python 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包：
- cef.redist.x86.3.2454.1344.nupkg，32位程式CEF nupkg包。
- cef.redist.x64.3.2454.1344.nupkg，64位程式CEF nupkg包。這個64位包是可選的，目前我們構造的都是32程式，不使用這個包。但是因為內部依賴關係，還是帶上這個包。
- cef.sdk.3.2454.1344.nupkg，CefSharp中間工程依賴這個包。
- CefSharp.Common.45.0.0.nupkg，CefSharp控制元件基礎nupgk包。
- 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目錄生成以下幾個檔案：
- cef.redist.x64.3.2454.1344.nupkg
- cef.redist.x86.3.2454.1344.nupkg
- 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檔案：
- CefSharp.Common.45.0.0.nupkg
- CefSharp.OffScreen.45.0.0.nupkg
- CefSharp.WinForms.45.0.0.nupkg
- 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 | <Windowx: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程式包管理器，選擇已安裝的包，如圖：