chrmoium中创建WebUI

chromium的UI非常简洁,我想有两个方面原因: 让用户更加简单上手,网页的可视面积更大 简单的UI减少了代码跨平台的复杂性 相比传统的windows客户端程序,chromium中设置页面、历史记录、书签管理统统都是通过所谓WebUI的网页实现了。WebUI把c++、html、css、js组织在一起,css,html做界面,js和c++做逻辑,灵活而又强大。chromium有篇文档介绍如何创建WebUI界面。可惜这个文档有些过时,有些地方已经改变了。我最近自己也按照例子HelloWorld写了WebUI,总结一下。 创建WebUI网页 chromium中的WebUI资源都是放在src/chrome/browser/resources目录下面。我们在这个目录下面创建一个src/chrome/browser/resources/hello_world.html: 接着是我们的css文件src/chrome/browser/resources/hello_world.css: js文件: 把资源添加到chromium中 我们增加了3个新的资源文件,为了在chromium使用这些资源,我们还需要把它加入到grd文件中,给他们分配一个ID,其他地方就可以根据ID引用这个资源了。在src/chrome/browser/browser_resources.grd里面,我们增加以下这几行: 增加页面的URL 跟chrome://settings/类似,也可以给我们创建的WebUI分配一个url。在src/chrome/common/url_constants.h: 然后在src/chrome/common/url_constants.cc: 增加本地化的字符串资源 chroumium为了实现多语言,它把字符串当作一种资源,不同的语言版本可以加载不同的语言资源。在src/chrome/app/generated_resources.grd: 增加WebUI类来处理请求 当我们在浏览器打开chrome://hello-world/时,会调用我们HelloWorldUI类去处理对应的逻辑。 src/chrome/browser/ui/webui/hello_world_ui.h: 在src/chrome/browser/ui/webui/hello_world_ui.cc: 增加c++代码文件到chromium中 我们刚才增加了2个cpp文件hello_world_ui.cc,hello_world_ui.h,我们需要把它加到chromium的gyp文件里,重新生成编译工程文件sln。 在src/chrome/browser/ui/webui/chrome_web_ui_controller_factory.cc:把我们的webui类和url对应起来: 回调处理 WebUI中的js可以通过回调函数跟c++代码交互。下面是js代码中传入两个数字参数,然后c++计算出结果在回调给js代码。 src/chrome/browser/ui/webui/hello_world_ui.h: src/chrome/browser/ui/webui/hello_world_ui.cc: src/chrome/browser/resources/hello_world.js: 我们在地址栏输入“chrome://hello-world”最后的效果是这样的:                   ... Read More | Share it now!