在CEF里，JS和Native（C/C++）代码能够非常方便的交互，这里https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration.md解说得非常清楚。我照着它实现了一个简单的交互演示样例。
foruok原创。如需转载请关注foruok的微信订阅号“程序视界”联系foruok。
在贴代码之前。先来看看Browser进程和Render进程是怎么回事儿。有什么不同。
Browser与Render进程
从cefsimple開始吧，cefsimple_win.cc中的wWinMain函数中调用了CefExecuteProcess()方法来检測是否要启动其他的子进程。此处的CefExecuteProcess是在libcef_dll_wrapper.cc中的，它内部又调用了cef_execute_process方法（libcef_dll.cc），cef_execute_process又调用了libcef/browser/context.cc文件内实现的CefExecuteProcess方法。这种方法代码例如以下：
int CefExecuteProcess(const CefMainArgs& args,
CefRefPtr<CefApp> application,
void* windows_sandbox_info) {
base::CommandLine command_line(base::CommandLine::NO_PROGRAM);
#if defined(OS_WIN)
command_line.ParseFromString(::GetCommandLineW());
#else
command_line.InitFromArgv(args.argc, args.argv);
#endif
// Wait for the debugger as early in process initialization as possible.
if (command_line.HasSwitch(switches::kWaitForDebugger))
base::debug::WaitForDebugger(60, true);
// If no process type is specified then it represents the browser process and
// we do nothing.
std::string process_type =
command_line.GetSwitchValueASCII(switches::kProcessType);
if (process_type.empty())
return -1;
CefMainDelegate main_delegate(application);
// Execute the secondary process.
#if defined(OS_WIN)
sandbox::SandboxInterfaceInfo sandbox_info = {0};
if (windows_sandbox_info == NULL) {
content::InitializeSandboxInfo(&sandbox_info);
windows_sandbox_info = &sandbox_info;
}
content::ContentMainParams params(&main_delegate);
params.instance = args.instance;
params.sandbox_info =
static_cast<sandbox::SandboxInterfaceInfo*>(windows_sandbox_info);
return content::ContentMain(params);
#else
content::ContentMainParams params(&main_delegate);
params.argc = args.argc;
params.argv = const_cast<const char**>(args.argv);
return content::ContentMain(params);
#endif
它分析了命令行參数，提取”type”參数。假设为空。说明是Browser进程，返回-1。这样一路回溯到wWinMain方法里，然后開始创建Browser进程相关的内容。
假设”type”參数不为空，做一些推断，最后调用了content::ContentMain方法，直到这种方法结束。子进程随之结束。
content::ContentMain方法再追溯下去，就到了chromium的代码里了。在chromium/src/content/app/content_main.cc文件里。
详细我们不分析了，感兴趣的能够去看看。
分析了CefExecuteProcess方法我们知道，Browser进程在cefsimple_win.cc内调用了CefExecuteProcess之后做了进一步的配置，这个是在simple_app.cc内完毕的，详细就是SimpleApp::OnContextInitialized()这种方法。代码例如以下：
void SimpleApp::OnContextInitialized() {
CEF_REQUIRE_UI_THREAD();
CefWindowInfo window_info;
window_info.SetAsPopup(NULL, "cefsimple");
// SimpleHandler implements browser-level callbacks.
CefRefPtr<SimpleHandler> handler(new SimpleHandler());
// Specify CEF browser settings here.
CefBrowserSettings browser_settings;
std::string url;
CefRefPtr<CefCommandLine> command_line =
CefCommandLine::GetGlobalCommandLine();
url = command_line->GetSwitchValue("url");
if (url.empty())
url = "http://www.google.com";
CefBrowserHost::CreateBrowser(window_info, handler.get(), url,
browser_settings, NULL);
}
能够看到。这里创建SimpleHandler，并传递给CefBrowserHost::CreateBrowser去使用。
如今我们清楚了，Browser进程，须要CefApp（SimpleApp实现了这个接口）和CefClient（SimpleHandler实现了这个接口）。而Renderer进程仅仅要CefApp。
另外，CEF还定义了CefBrowserProcessHandler和CefRenderProcessHandler两个接口，分别来处理Browser进程和Render进程的个性化的通知。
因此，Browser进程的App一般还须要实现CefBrowserProcessHandler接口，Renderer进程的App一般还须要实现CefRenderProcessHandler接口。这里https://bitbucket.org/chromiumembedded/cef/wiki/GeneralUsage有详细说明。
像cefsimple这个演示样例中的SimpeApp，没有实现CefRenderProcessHandler接口，没有针对Renderer进程做特别处理，所以当它作为Render进程时。会缺失一部分功能。
比方JS与Native代码交互，这正是我们想要的。
假设要实现JS与Native代码交互，最好分开实现Browser进程须要的CefApp和Render进程须要的CefApp。
像以下这样：
class ClientAppRenderer : public CefApp,
public CefRenderProcessHandler
{
...
}
class ClientAppBrowser : public CefApp,
public CefBrowserProcessHandler
{
...
}
当我们实现了CefRenderProcessHandler接口，就能够在其OnContextCreated()方法中获取到CefFrame相应的window对象。在它上面绑定一些JS函数或对象。然后JS代码里就能够通过window对象訪问。假设是函数。就会调用到我们实现的CefV8Handler接口的Execute方法。
第二种实现JS与Native交互的方式，是在实现CefRenderProcessHandler的OnWebKitInitialized()方法时导出JS扩展，详细參考https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration.md，有详细说明。
cef_js_integration项目
cef_js_integration是非常easy的演示样例。用来演示JS与Native的交互。它在一个项目内实现了ClientAppBrowser、ClientAppRenderer、ClientAppOther三种CefApp。分别相应Browser、Render及其他类别的三种进程。
JS和Native代码的交互发生在Render进程。App须要继承CefRenderProcessHandler来整合JS相关功能。因此在应用在启动时做了进程类型推断。依据不同的进程类型创建不同的CefApp。
这个演示样例演示了三种JS交互方式（參见https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration.md）：
- 在native代码中通过CefFrame::ExecuteJavaScript()来运行JavaScript代码
- 将函数或对象绑定到CefFrame相应的window对象上。JS代码通过window对象訪问native代码导出的函数或对象
- 使用CefRegisterExtension()注冊JS扩展，JS直接訪问注冊到JS Context中的对象
这个项目參考了cefsimple、cefclient，还有https://github.com/acristoffers/CEF3SimpleSample，终于它比cefsimple复杂一点，比cefclient简单非常多。
好啦，背景几乎相同，上源代码。
cef_js_integration.cpp：
#include <windows.h>
#include <tchar.h>
#include "cef_js_integration.h"
#include <string>
#include <algorithm>
#include "include/cef_app.h"
#include "include/cef_browser.h"
#include "ClientAppBrowser.h"
#include "ClientAppRenderer.h"
#include "ClientAppOther.h"
#include "include/cef_command_line.h"
#include "include/cef_sandbox_win.h"
//#define CEF_USE_SANDBOX 1
#if defined(CEF_USE_SANDBOX)
#pragma comment(lib, "cef_sandbox.lib")
#endif
int APIENTRY _tWinMain(_In_ HINSTANCE hInstance,
_In_opt_ HINSTANCE hPrevInstance,
_In_ LPTSTR lpCmdLine,
_In_ int nCmdShow)
{
UNREFERENCED_PARAMETER(hPrevInstance);
UNREFERENCED_PARAMETER(lpCmdLine);
// Enable High-DPI support on Windows 7 or newer.
CefEnableHighDPISupport();
CefMainArgs main_args(hInstance);
void* sandbox_info = NULL;
#if defined(CEF_USE_SANDBOX)
CefScopedSandboxInfo scoped_sandbox;
sandbox_info = scoped_sandbox.sandbox_info();
#endif
// Parse command-line arguments.
CefRefPtr<CefCommandLine> command_line = CefCommandLine::CreateCommandLine();
command_line->InitFromString(::GetCommandLineW());
// Create a ClientApp of the correct type.
CefRefPtr<CefApp> app;
// The command-line flag won't be specified for the browser process.
if (!command_line->HasSwitch("type"))
{
app = new ClientAppBrowser();
}
else
{
const std::string& processType = command_line->GetSwitchValue("type");
if (processType == "renderer")
{
app = new ClientAppRenderer();
}
else
{
app = new ClientAppOther();
}
}
// Execute the secondary process, if any.
int exit_code = CefExecuteProcess(main_args, app, sandbox_info);
if (exit_code >= 0)
return exit_code;
// Specify CEF global settings here.
CefSettings settings;
#if !defined(CEF_USE_SANDBOX)
settings.no_sandbox = true;
#endif
// Initialize CEF.
CefInitialize(main_args, settings, app.get(), sandbox_info);
// Run the CEF message loop. This will block until CefQuitMessageLoop() is
// called.
CefRunMessageLoop();
// Shut down CEF.
CefShutdown();
return 0;
}
能够看到。_tWinMain方法中解析了命令行參数，依据进程类型创建了不同的CefApp。
这是它与cefsimple的差别。
ClientAppBrowser类与cefsimple演示样例中的SimpleApp基本一致，略过。
ClientAppRender类在ClientAppRender.h和ClientAppRender.cpp中实现。先是ClientAppRender.h：
#ifndef CEF3_CLIENT_APP_RENDERER_H
#define CEF3_CLIENT_APP_RENDERER_H
#include "include/cef_app.h"
#include "include/cef_client.h"
#include "V8handler.h"
class ClientAppRenderer : public CefApp,
public CefRenderProcessHandler
{
public:
ClientAppRenderer();
CefRefPtr<CefRenderProcessHandler> GetRenderProcessHandler() OVERRIDE
{
return this;
}
void OnContextCreated(
CefRefPtr<CefBrowser> browser,
CefRefPtr<CefFrame> frame,
CefRefPtr<CefV8Context> context);
void OnWebKitInitialized() OVERRIDE;
private:
CefRefPtr<ClientV8Handler> m_v8Handler;
IMPLEMENT_REFCOUNTING(ClientAppRenderer);
};
#endif
ClientAppRender聚合了ClientV8Handler类的实例，回头再说。先来看ClientAppRender的OnContextCreated和OnWebKitInitialized，它们是实现JS与Native交互的关键。代码例如以下：
#include "ClientAppRenderer.h"
#include "V8handler.h"
#include <Windows.h>
#include <tchar.h>
ClientAppRenderer::ClientAppRenderer()
: m_v8Handler(new ClientV8Handler)
{
}
void ClientAppRenderer::OnContextCreated(CefRefPtr<CefBrowser> browser,
CefRefPtr<CefFrame> frame,
CefRefPtr<CefV8Context> context)
{
OutputDebugString(_T("ClientAppRenderer::OnContextCreated, create window binding\r\n"));
// Retrieve the context's window object.
CefRefPtr<CefV8Value> object = context->GetGlobal();
// Create the "NativeLogin" function.
CefRefPtr<CefV8Value> func = CefV8Value::CreateFunction("NativeLogin", m_v8Handler);
// Add the "NativeLogin" function to the "window" object.
object->SetValue("NativeLogin", func, V8_PROPERTY_ATTRIBUTE_NONE);
}
void ClientAppRenderer::OnWebKitInitialized()
{
OutputDebugString(_T("ClientAppRenderer::OnWebKitInitialized, create js extensions\r\n"));
std::string app_code =
"var app;"
"if (!app)"
" app = {};"
"(function() {"
" app.GetId = function() {"
" native function GetId();"
" return GetId();"
" };"
"})();";
CefRegisterExtension("v8/app", app_code, m_v8Handler);
}
OnContextCreated给window对象绑定了一个NativeLogin函数，这个函数将由ClientV8Handler类来处理，当HTML中的JS代码调用window.NativeLogin时，ClientV8Handler的Execute方法会被调用。
OnWebKitInitialized注冊了一个名为app的JS扩展，在这个扩展里为app定义了GetId方法，app.GetId内部调用了native版本号的GetId()。HTML中的JS代码可能例如以下：
alert(app.GetId());
当浏览器运行上面的代码时，ClientV8Handler的Execute方法会被调用。
好啦。如今来看ClientV8Handler的实现（V8Handler.cpp）：
#include "V8handler.h"
#include <Windows.h>
#include <tchar.h>
bool ClientV8Handler::Execute(const CefString& name,
CefRefPtr<CefV8Value> object,
const CefV8ValueList& arguments,
CefRefPtr<CefV8Value>& retval,
CefString& exception)
{
if (name == "NativeLogin")
{
if (arguments.size() == 2)
{
CefString strUser = arguments.at(0)->GetStringValue();
CefString strPassword = arguments.at(1)->GetStringValue();
TCHAR szLog[256] = { 0 };
_stprintf_s(szLog, 256, _T("user - %s, password - %s\r\n"), strUser.c_str(), strPassword.c_str());
OutputDebugString(szLog);
//TODO: doSomething() in native way
retval = CefV8Value::CreateInt(0);
}
else
{
retval = CefV8Value::CreateInt(2);
}
return true;
}
else if (name == "GetId")
{
if (arguments.size() == 0)
{
// execute javascript
// just for test
CefRefPtr<CefFrame> frame = CefV8Context::GetCurrentContext()->GetBrowser()->GetMainFrame();
frame->ExecuteJavaScript("alert('Hello, I came from native world.')", frame->GetURL(), 0);
// return to JS
retval = CefV8Value::CreateString("72395678");
return true;
}
}
// Function does not exist.
return false;
}
Execute在处理GetId方法时，还使用CefFrame::ExecuteJavaScript演示了怎样在native代码中运行JS代码。
最后。来看一下html代码：
<!DOCTYPE html>
<html>
<!--
Copyright (c) 2016 foruok. All rights reserved.
欢迎关注foruok的微信订阅好“程序视界”。
-->
<head>
<script type="text/javascript">
function Login(){
window.NativeLogin(document.getElementById("userName").value, document.getElementById("password").value);
}
function GetId(){
alert("get id from native by extensions: " + app.GetId());
}
</script>
<title>CEF JS Integration</title>
</head>
<body>
<h3>Call into native by Window bindings:</h3>
<form>
UserName: <input type="text" id="userName" /> Password:
<input type="text" id="password" /> <input type="button" value="Login" onclick="Login()"/>
</form>
<hr>
<h3>Call into native by js extensions:</h3>
<input type="button" value="GetId" onclick="GetId()"/>
</html>
通过以下的命令能够測试：
cef_js_integration.exe --url=file:///cef_js_integration.html
好啦，JS与Native交互的演示样例就到这里了。
其他參考文章：
- CEF Windows开发环境搭建
- CEF载入PPAPI插件
- VS2013编译最简单的PPAPI插件
- 理解PPAPI的设计
- PPAPI插件与浏览器的交互过程
- Windows下从源代码编译CEF
- 编译PPAPI的media_stream_video演示样例
- PPAPI插件的画图与输入事件处理
- 在PPAPI插件中创建本地窗体
- PPAPI插件与浏览器的通信
- Windows下从源代码编译Skia
- 在PPAPI插件中使用Skia画图
- 载入DLL中的图片资源生成Skia中的SkBitmap对象
- PPAPI+Skia实现的涂鸦板
- PPAPI中使用Chromium的3D图形接口
- PPAPI中使用OpenGL ES画图