创建Chrome WebUI接口（Chrome内部页面）

最新推荐文章于 2024-05-28 09:39:24 发布

jokers_i

最新推荐文章于 2024-05-28 09:39:24 发布

阅读量9.1k

点赞数

分类专栏： C/C++ Linux/Gtk 文章标签： chrome c++ webui

本文链接：https://blog.csdn.net/jokers_i/article/details/9307215

版权

背景

看了：http://blog.csdn.net/doon/article/details/9252327，做了一个WebUI的页面，但是过程中遇到很多问题（类名称的改变，函数名的改变等），针对我的Chromium版本修改了一下（对于最新的版本还是需要做一些改动，因为Chromium的代码更新太快了……）

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

创建WebUI（Chromium25.0.1364.99)

什么是WebUI

WebUI就是Chrome的chrome://about/中列出来的页面。它根本上是一个html页面，但是他的数据可以从浏览器内部的C++代码获取，它可以使用js向浏览器发送消息，还可以接收浏览器发送的消息。
为什么要用WebUI

因为html+js与平台无关，这些页面本来需要使用平台特定的UI库来实现，而其本身又没有太多的功能要实现，只是一些简单的数据显示和存储，使用html页面就很方便，而且js在WebUI的支持下也能满足所有需求。
WebUI都包含哪些内容
1. 一个基本的html页面，页面中包含基本的元素，由后台为其填充数据
2. js脚本文件，也可以嵌入到html页面中，与后台C++代码的通信都由js完成，后台传递过来数据后也需要js进行显示
3. 一个继承自content::WebUIController的类，该类负责html页面的数据填充和消息传递

简单登录页面创建过程

WebUI的资源文件都位于src/chrome/browser/resources目录下，编译时会集中打到资源包文件中。首先创建一个html文件：

<!DOCTYPEHTML>

<htmli18n-values="dir:textdirection">

<head>

<metacharset="utf-8">

<titlei18n-content="helloWorldTitle"></title>

<scriptsrc="chrome://resources/js/cr.js"></script>

<scriptsrc="chrome://resources/js/load_time_data.js"></script>

<scriptsrc="chrome://resources/js/util.js"></script>

<scriptsrc="strings.js"></script>

最低0.47元/天解锁文章

jokers_i

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
创建Chrome WebUI接口（Chrome内部页面）

什么是WebUIWebUI就是Chrome的chrome://about/中列出来的页面。它根本上是一个html页面，但是他的数据可以从浏览器内部的C++代码获取，它可以使用js向浏览器发送消息，还可以接收浏览器发送的消息。为什么要用WebUI因为html+js与平台无关，这些页面本来需要使用平台特定的UI库来实现，而其本身又没有太多的功能要实现，只是一些简单的数据显示和存储，使用html页面就很方便，而且js在WebUI的支持下也能满足所有需求。
复制链接

扫一扫

专栏目录