chromium之webui

chromium中实现了一个webui机制，主要作用是使用网页来展示一个本地页面，将html、css、js以及c++联合起来。

Webui机制几个组件：

1、WebUI ： 为一个HTML UI设置数据源和消息处理器，主要的功能为js的调用绑定函数，以及设置js调用完成之后的回调函数；

2、WebUIController：WebUI的实际功能就是通过此controller实现，它负责管理数据源和消息处理器，可以说是WebUI机制中的核心；

3、WebUIDataResource：HTML UI 的数据源，包括HTML文件和相应的资源文件

4、WeBUIMessageHandler：处理消息

WebUI的创建

WebUI工作在browser进程中，根据加载的url进行创建，每当WebContentsImpl加载一个页面的时候，都会创建一个WebUI，没有经过配置的页面就不会创建成功，配置方法就在content/public/common/url_constants.h中声明一个char数组：

extern const char kChromeUIAccessibilityHost[ ]，

在url_constant.cch中会为这个数组赋值 ：

const char kChromeUIAccessibilityHost[ ] = "accessibility";

以上就是创建一个webUI需要配置的。

WebUI的具体创建是由其工厂类来实现的，WebUI有一个工厂类基类：WebUIControllerFactory，在当前的代码中，WebUIControllerFactoryRegistry实现了工厂基类，具体创建过程如下：

首先是在web_contents_impl中：

std::unique_ptr<WebUIImpl> WebContentsImpl::CreateWebUI(    const GURL& url,    const std::string& frame_name) {  std::unique_ptr<WebUIImpl> web_ui =      base::MakeUnique<WebUIImpl>(this, frame_name);  WebUIController* controller =      WebUIControllerFactoryRegistry::GetInstance()          ->CreateWebUIControllerForURL(web_ui.get(), url);  if (controller) {    web_ui->AddMessageHandler(base::MakeUnique<GenericHandler>());    web_ui->SetController(controller);    return web_ui;  }  return nullptr;}

首先是创建一个WebUI，然后在创建WebUIController，若WebUIController创建失败，则销毁WebUI；创建成功，就给WebUI加上controller和消息处理器。

从以上的代码可以看到，WebUIController是通过一个factory来创建的，所以继续：

void WebUIControllerFactory::RegisterFactory(WebUIControllerFactory* factory) {  g_factories.Pointer()->push_back(factory);}WebUIController* WebUIControllerFactoryRegistry::CreateWebUIControllerForURL(    WebUI* web_ui, const GURL& url) const {  std::vector<WebUIControllerFactory*>* factories = g_factories.Pointer();  for (size_t i = 0; i < factories->size(); ++i) {    WebUIController* controller = (*factories)[i]->CreateWebUIControllerForURL(        web_ui, url);    if (controller)      return controller;  }  return NULL;}

看以上的两个函数，第一个是WebUIController中声明的静态函数，将所有的WebUIController子类都放在一个列表之中；第二个就是创建函数，遍历子类列表，通过url来判断，若有匹配的，就创建那个url对应的的WebUIController。

js的调用：

在render进程中有一个WebUIExtension，这个类为js调用c++提供了两个接口，一个是send，另一个是getVariableValue；

首先是Send的调用及处理过程：

1、js代码直接调用chrome.send()，其中会带有若干参数，至少一个；

2、以上的send()将调用到WebUIExtension中的Send()方法，在该方法中，将send()附带的参数打包成一个list，list的第一个参数是js要传递给browser进程的消息，后面的元素都是这个消息附带的参数；

3、WebUIExtension::Send() 将发送一个ipc消息ViewHostMsg_WebUISend，这个消息附带的参数就是上面封装好的list；

4、在browser进程中，WebUIImpl会接收到以上的ipc消息，然后将参数list取出，使用OnWebUISend()来处理这个list；

5、在WebUIImpl::OnWebUISend()会调用WebUIImpl::ProcessWebUIMessage()来继续处理由js发过来的消息；在ProcessWebUIMessage()中，首先是使用controller的OverrideHandleWebUIMessage()来处理这个消息，若处理，则消息的传递到此为止，若controller不处理这个消息，那么将有WebUIImpl中的MessageCallBack来处理；

6、处理完毕后，将处理的结果包装成ipc消息，发送到render进程，发送的消息就是ViewMsg_SetWebUIProperty;

7、处理消息的WebUIExtensionData::OnMessageReceived()，将消息中的变量名和变量值存储到一个map中，供getVariableValue来获取值。

接下来是getVariableValue的处理过程：

该方法是js来获取一个值，这个在render中由一个字符串来标记，所以参数是一个字符串；

1、js代码调用chrome.getVariableValue(name)；

2、然后调用到WebUIExtension::GetVariableValue()中，然后此处调用WebUIExtensionData::GetValue(name)；

3、在WebUIExtensionData中，通过其中的map来获取name对应的值。

本文大致介绍了WebUI机制的一个基本信息，以及调用的原理，后面将会总结一个实际的例子，具体使用请参见后面的内容。