初探Chromium Embedded Framework

初探Chromium Embedded Framework

前言

  Chromium Embedded Framework以下簡稱為"cef"，是一個可以在Native App裡使用Chrome的Framework，知名的"Electron"的前端就是"cef"，由於是個開源專案，所以來研究一下在此做個紀錄。

內容

  如果上網搜尋很容易會找到開源專案的位置 Chromium Embedded Framework Overview，開啟後會得到Git的URL，如下圖

cef的Git

如果就這麼開開心心的用Git直接Clone的話，就等於在"浪費時間"，因為那個Git並不是用來給使用者存取的，而是給"cef"的自動建置流程來存取的!所以下載完後會發現根本不能建置。那麼該如何建置"cef"，請參考MasterBuildQuickStart。

  在開啟MasterBuildQuickStart後，先看"File Structure"，如下圖

cef的File structure

這個"File Structure"有一部分是要手動建構的，不是自動產生的，該網頁還會說明各個平台建置需求與步驟，以下說明為Windows平台。雖說網頁上說要準備40G的空間，但我實際建置64位元Debug版後，發現大概要55G，建立前請確認空間是否充足。

  第一步是建立"automate"與"chromimu_git"資料夾，說明的Root資料夾為"c:\code"，請示需求更改Root資料夾。

  第二步是在Root資料夾下建立"depot_tools"資料夾，並下載說明中的"depot_tools.zip"，如下圖

下載"depot_tools.zip"

載完後，解壓到"depot_tools"資料夾下即可。

  第三步是執行"update_depot_tools.bat"，這個檔案在"depot_tools"資料夾裡，但在執行前請確認Python的版本，限定2.7.x版才可以成功建置，如果是3以後的版本請切換。

  第四步是將"depot_tools"資料夾的位址加到環境變數"path"裡。

  第五步是下載"automate-git.py"，如下圖

下載"automate-git.py"

下載後放到"automate"資料夾下。

  第6步是製造"update.bat"，到"chromimu_git"的資料夾下新增一個"update.bat"，內容如下

set GN_DEFINES=use_jumbo_build=true
set GN_ARGUMENTS=--ide=vs2017 --sln=cef --filters=//cef/*
python ..\automate\automate-git.py --download-dir=c:\code\chromium_git --depot-tools-dir=c:\code\depot_tools --no-distrib --no-build

注意一下紅色的內容，有兩個檔案位置會因為Root資料夾的位置不一樣而改變，請示需要修改。改完後直接執行"update.bat"。這個步驟有點就大概要一個半小時，執行中如果中斷就要重來，請先注意。

  第7步是製造"create.bat"，到"(root)\chromimu_git\chromium\src\cef"下，製造"create.bat"，內容如下

set GN_DEFINES=use_jumbo_build=true
set GN_ARGUMENTS=--ide=vs2017 --sln=cef --filters=//cef/*
call cef_create_projects.bat

改完後就直接執行。

  第8步就是啟動自動建置，到"(root)\chromimu_git\chromium\src"，執行以下命令

ninja -C out\Debug_GN_x64 cef

這種個建置過程非常久，在我的電腦是3個小時，請注意。如果建置完成就可以在"(root)\chromimu_git\chromium\src\out\Debug_GN_x64"下找到"cefclient.exe"，執行後就可得到一個cef的視窗。

參考資料

MasterBuildQuickStart