官方主頁: 點擊打開鏈接
CEF簡介:
嵌入式Chromium框架(簡稱CEF) 是一個由Marshall Greenblatt在2008建立的開源項目,它主要目的是開發一個基於Google Chromium的Webbrowser控件。CEF支持一系列的編程語言和操作系統,並且能很容易地整合到新的或已有的工程中去。
它的設計思想政治就是易用且兼顧性能。CEF基本的框架包含C/C++程序接口,通過本地庫的接口來實現,而這個庫則會隔離宿主程序和Chromium&Webkit的操作細節。它在瀏覽器控件和宿主程序之間提供緊密的整合,它支持用戶插件,協議,javascript對象以及javascript擴展,宿主程序可以隨意地控件資源下載,導航,下下文內容和打印等,並且可以跟Google Chrome瀏覽器一起,支持高性能和Html5 技術,
CEF指南:
指南:
首先把這段代碼插入到窗口的創建函數裏面去:
- // Create an instance of our CefClient implementation. Various methods in the
- // MyClient instance will be called to notify about and customize browser
- // behavior.
- CefRefPtr<CefClient> client(new MyClient());
- // Information about the parent window, client rectangle, etc.
- CefWindowInfo info;
- info.SetAsChild(...);
- // Browser initialization settings.
- CefBrowserSettings settings;
- // Create the new browser window object asynchronously. This eventually results
- // in a call to CefLifeSpanHandler::OnAfterCreated().
- CefBrowser::CreateBrowser(info, client, "http://www.google.com", settings);
這段代碼你可以在[test]文件夾下面的cefclient工程裏面看到。
文件結構:
include -- 這個文件夾裏面放CEF客戶應用程序所需的頭文件
libcef -- 此文件夾存放CEF的靜態庫
libcef_dll -- 此文件夾CEF的動態拉鍊庫
tests -- 此文件夾存放測試的例子
cefclient -- 一個簡單的客戶程序
unittests -- CEF界面單元測試
瀏覽器事件:
插入網景風格插件:
JavaScript擴展:
用戶計劃:
框架總覽:
框架的建立和銷燬:
引用計數:
平臺無關:
框架接口:
以上內容是Cef的簡介,後面我將翻譯怎麼編譯並生成一個用CEF控件來創建的一個簡單瀏覽器!
這部分講解CEF的分支信息並介紹下載編譯和打包源代碼
背景:
發展:
發佈版:
發佈版本 | Chromium版本 | CEF1支持性 | CEF3支持性 |
963 | 17 | 是 | 否 |
1025 | 18 | 是 | 否 |
1084 | 19 | 是 | 否 |
1180 | 21 | 是 | 是 |
1271 | 23 | 是 | 是 |
1364 | 25 | 是 | 是 |
1453 | 26 | 是 | 是 |
編譯源代碼:
1.爲你的操作系統和開發環境安裝必要的包:
2.配置環境可以影響GYP
自動的方法:
1.下載自動工具 automate.py:
<span class="pln">http</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="com" style="color: rgb(136, 0, 0);">//chromiumembedded.googlecode.com/svn/trunk/cef1/tools/automate /path/to/automate</span>
2.運行automate.py腳本:
<span class="pln">python </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">path</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">automate</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">automate</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">py </span><span class="pun" style="color: rgb(102, 102, 0);">--</span><span class="pln">download</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln">dir</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="str" style="color: rgb(0, 136, 0);">/path/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">download </span><span class="pun" style="color: rgb(102, 102, 0);">--</span><span class="pln">url</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln">http</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="com" style="color: rgb(136, 0, 0);">//chromiumembedded.googlecode.com/svn/branches/1084/cef1</span>
手動下載:
開發版:
<span class="pln"> svn co http</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="com" style="color: rgb(136, 0, 0);">//src.chromium.org/svn/trunk/tools/depot_tools</span>C. 增加depot_tools的目錄到你的PATH,在Windows下depot_tools的路徑應該要放在TortoiseSVN的前面
<span class="pln">cd </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">path</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">chromium gclient config http</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="com" style="color: rgb(136, 0, 0);">//src.chromium.org/chrome/trunk/src</span>remind: 上面這段你只要複製到cmd裏面去運行就可以了
<span class="pln">cd </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">path</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">chromium gclient sync </span><span class="pun" style="color: rgb(102, 102, 0);">--</span><span class="pln">revision src@chromium_revision </span><span class="pun" style="color: rgb(102, 102, 0);">--</span><span class="pln">jobs </span><span class="lit" style="color: rgb(0, 102, 102);">8</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">--</span><span class="pln">force</span>4. 下載CEF源代碼到"cef"文件夾,而且這個文件夾必須包含在Chromium的"src"文件夾目錄下,你最好只下載CEF1或CEF3而不要兩者都下,假設你的Chromium源代碼下載在"/path/to/chromium/src",那麼你的CEF源代碼就應該放在"/path/to/chromium/src/cef"。注意不管你下的是CEF1或CEF3,文件夾名都必須命名爲"cef"
<span class="pln">cd </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">path</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">chromium</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">src svn co http</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="com" style="color: rgb(136, 0, 0);">//chromiumembedded.googlecode.com/svn/trunk/cef1 cef</span>
發佈版:
手動編譯:
1.運行cef_create_project腳本(windows下用.bat, OS-X和linux下用.sh)去產生一個在GYP配置下的編譯文件
<span class="pln">cd </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">path</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">chromium</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">src</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">cef </span><span class="pun" style="color: rgb(102, 102, 0);">./</span><span class="pln">cef_create_projects</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">sh</span>
2.編譯CEF
<span class="pln">cd </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">path</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">chromium</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">src</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">cef</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">tools build_projects</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">sh </span><span class="typ" style="color: rgb(102, 0, 102);">Debug</span>
手動打包:
<span class="pln">cd </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">path</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">to</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">chromium</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">src</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">cef</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln">tools make_distrib</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">sh</span>如果這個過程成功了,一個二進制的分發包會生成在/path/to/chromium/src/cef/binary_distrib目錄中。
一般用法
使用CEF便捷的創建一個全功能的內建瀏覽器如下所示:
// Define an instance of our CefHandler implementation. Various methods in the MyHandler // instance will be called to customize browser behavior. CefRefPtr<CefHandler> handler(new MyHandler()); // Provide information about the parent window, client rectangle, etc. CefWindowInfo info = {...}; // Create the new browser window object, which eventually results in a call to // MyHandler::HandleAfterCreated(). CefBrowser::CreateBrowser(info, false, handler, L"http://www.google.com");
在tests目錄下有一個客戶端程序的示例,叫cefclient。
文件結構
CEF資料庫結構如下:
- include -- 包括用於CEF客戶端程序的include文件。
- libcef -- libcef實現。
- libcef_dll -- libcef C API 和 DLL 實現.
- tests -- 測試程序.
- cefclient -- CEF客戶端應用程序示例。
- unittests -- CEF接口單元測試。
瀏覽器通知
瀏覽器通知是通過註冊的委託接口由瀏覽器發到客戶端程序的通知, CefHandler是最主要的委託接口, CefJSHandler則用於實現自定義的Javascript對象。
CefHandler支持以下接口:
- 窗口創建之前 (HandleBeforeCreated),客戶端可用之取消與定製瀏覽器窗口創建過程。
- 窗口創建之後(HandleAfterCreated). 可用於創建自定義的CefJSHandler對象。
- 地址欄更新(HandleAddressChange). 將地址欄更改爲指定的字符串,通知發生於導航提交後與頁面加載前。
- 標題更新(HandleTitleChange). 將標題更改爲指定的字符串,發生在頁面加載中。
- 瀏覽前(HandleBeforeBrowse). 可用於取消導航,該事件的信息包括URL,Post數據,請求頭.
- 開始加載(HandleLoadStart).
- 加載結束 (HandleLoadEnd).
- 加載錯誤(HandleLoadError). 加載過程中遇到錯誤,應用程序可提供自定義的錯誤頁面.
- 資源加載前 (HandleBeforeResourceLoad). 應用程序可提供替代的數據源 (比如內存中的緩存)或者取消加載.
- 顯示菜單前(HandleBeforeMenu). 可用於取消上下文菜單顯示或定製菜單,默認情況下,瀏覽器根據上下文顯示基本的菜單.
- 獲取菜單標籤(HandleGetMenuLabel).在默認菜單顯示前,每個菜單項調用一次,可用於將英文默認內容改爲其它語言.
- 菜單動作(HandleMenuAction). 用戶從默認上下文菜單選擇了一個選項,可用自己的方式來處理動作。
- 打印選項(HandlePrintOptions). 打印設置對話框顯示前調用,可用於定製頁面大小、方向與邊距等.
- 打印頁眉頁腳 (HandlePrintHeaderFooter). 在頁面視圖輸出到打印上下文,但是頁面結束前,可在預定義的6個位置(上左、上中、上右、下左,下中,下右)插入自定義的頁眉、頁腳字符串。該事件附帶的信息包括當前URL、標題、頁碼、總頁數、打印上下文、頁邊距與DPI拉伸比.
- JavaScript警告 (HandleJSAlert). 應用程序可自定義Javascript Alert窗口.
- JavaScrip確認 (HandleJSConfirm). 應用程序可自定義Javascript Comfirm窗口
- JavaScrip提示 (HandleJSPrompt). 應用程序可自定義Javascript Prompt窗口
- JavaScript Window 對象綁定 (HandleJSBinding). 應用程序將用戶定義的方法和變量附加到frame的window對象上
- Window關閉前 (HandleBeforeWindowClose). 窗口關閉前
- 獲得焦點(HandleTakeFocus). 瀏覽器組件失去焦點前調用
- 設置焦點(HandleSetFocus). 瀏覽器組件請求焦點前調用
- 鍵盤事件(HandleKeyEvent). 瀏覽器組件接收到鍵盤事件時
- 提示 (HandleTooltip). 用於修改tooltip文字
- 控制檯消息 (HandleConsoleMessage). 用於顯示控制檯消息.
- 查詢結果(HandleFindResult).用於自定義查找結果顯示處理
CefV8Handler支持以下通知:
- 執行事件(Execute). 應用程序執行指定的函數,該事件提供所有的Javascript參數,而且應用程序能指定返回值
瀏覽器事件
瀏覽器事件由客戶端應用程序通過CefBrowser和CefFrame的函數發送給瀏覽器:
- 後退、前進、重新加載與停止加載,用於控制瀏覽器導航.
- 撤消、重做、剪切、複製、粘貼、刪除、全選,用於控制目標區域內容.
- 打印. 打印目標框架.
- 查看源代碼. 將目標框架的HTML源代碼保存到臨時文件,並用默認的文本查看程序打開之
- 加載URL. 在指定框架中加載指定URL
- 載入字符串. 根據一個假URL在指定框架中加載某個字符串
- 加載流. 根據一個假URL,在指定框架中加載二進制數據
- 加載請求. 在指定框架中加載請求(URL, method, request data 與 headers) .
- 執行腳本. 在目標框架中執行任意Javascript命令
內嵌 NPAPI 插件
CEF支持創建Netscape-style內嵌插件,使用相同 NPAPI的內嵌插件和標準的DLL插件行爲相同,但是,相對於使用獨立的DLL,內嵌插件由容器應用程序創建,並通過調用CefRegisterPlugin()註冊到系統,如果要直接使用這一功能,需要include cef_nplugin.h .
JavaScript擴展
CEF支持可以和原生應用程序代碼交互的Javascript擴展,參見cef.h的CefRegisterExtension() 函數和cefclient示例程序的"JavaScript Extension Handler" 以及 "UI App Example" 測試 .
自定義Schemes
CEF支持註冊與處理自定義scheme,類似於myscheme://mydomain。參見cef.h中的CefRegisterScheme()函數與示例應用程序cefclient中的 "Scheme Handler" 測試.
框架實現概覽
CEF所有的類以Cef爲前綴.
框架準備與拆卸
UI消息循環由框架創建的一個單獨線程處理,客戶端程序應負責通過分別調用CefInitialize()和CefShutdown() 來爲每個進程準備與關閉這一線程。
引用計數
所有實現了CefBase接口的框架類與對象指針都由CefRefPtr智能指針實現來處理,通過調用AddRef()和Release()自動處理引用計數。
平臺無關
CEF框架被設計成平臺無關,需要當前我們僅支持windows平臺,但是我們計劃將來支持其它平臺。爲了儘可能減少雙平臺支持帶來的麻煩,框架定義了一系列實現無關的接口與類型定義包裝跨平臺的行爲。
線程安全
框架的所有接口實現必須是跨線程訪問安全的,CefThreadSafeBase 模版提供原子的AddRef() 和 Release() 實現,還提供Lock() 和 Unlock()方法以同步方式訪問代碼塊.
框架接口
框架定義瞭如下接口:
- CefBrowser 是主要的瀏覽器host類,通過它的靜態方法CefBrowser::CreateBrowser()方法創建新瀏覽器窗口.
- CefFrame 表示瀏覽器窗口裏的一個框架(frame),每個瀏覽器窗口都有一個頂級的主框架,可通過CefBrowser::GetMainFrame()方法訪問之.
- CefHandler 是傳給CefBrowser::CreateBrowser()方法的最主要委託接口.
- CefRequest 表示請求數據,比如url, method, post data 和 headers.
- CefPostData 和 CefPostDataElement 表示可能是請求一部分的post數據.
- CefSchemeHandlerFactory 和 CefSchemeHandler 用於處理像myscheme://mydomain這樣的自定義scheme.
- CefStreamReader, CefStreamWriter, CefReadHandler 和 CefWriteHandler 讀寫數據的簡單的接口.
- CefV8Handler 和 CefV8Value 用於創建和訪問Javascript對象.