当前位置:编程学习 > 网站相关 >>

创建Chromium WebUI接口

Chrome的WebUI是那种,在Chrome中输入 "chrome://xxxx"就能打开一个URL页面的对象。

创建一个Chrome WebUI接口非常的简单,只需要改动数个文件。

创建WebUI页面
webui的资源,放在资源目录下:src/chrome/browser/resources. 当创建WebUI资源时,参考Web Development Style Guide。例如,我们创建一个HelloWorld的页面

src/chrome/browser/resources/hello_world.html

 

<!DOCTYPE HTML>
<html i18n-values="dir:textdirection">
<head>
 <meta charset="utf-8">
 <title i18n-content="helloWorldTitle"></title>
 <link rel="stylesheet" href="hello_world.css">
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/load_time_data.js"></script>
<script src="chrome://resources/js/util.js"></script>
 <script src="strings.js"></script>
 <script src="hello_world.js"></script>
</head>
<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
  <h1 i18n-content="helloWorldTitle"></h1>

  <p id="welcome-message"></p>

<script src="chrome://resources/js/i18n_template2.js"></script>
</body>
</html>


src/chrome/browser/resources/hello_world.css:
p {
  white-space: pre-wrap;
}


src/chrome/browser/resources/hello_world.js:
cr.define('hello_world', function() {
  'use strict';


  /**
   * Be polite and insert translated hello world strings for the user on loading.
   */
  function initialize() {
    $('welcome-message').textContent = loadTimeData.getStringF('welcomeMessage',
        loadTimeData.getString('userName'));
  }


  // Return an object with all of the exports.
  return {
    initialize: initialize,
  };
});


document.addEventListener('DOMContentLoaded', hello_world.initialize);
资源信息应该添加到Chrome使用的src/chrome/browser/browser_resources.grd文件中。
src/chrome/browser/browser_resources.grd:

+ <include name="IDR_HELLO_WORLD_HTML" file="resources\hello_world.html" type="BINDATA" />
+ <include name="IDR_HELLO_WORLD_CSS" file="resources\hello_world.css" type="BINDATA" />
+ <include name="IDR_HELLO_WORLD_JS" file="resources\hello_world.js" type="BINDATA" />

 


添加URL标识到新的Chrome URL中
URL标识被保存在src/chrome/common/url_constants.*文件中。
src/chrome/common/url_constants.h:
+ extern const char kChromeUIHelloWorldURL[];
...
+ extern const char kChromeUIHelloWorldHost[];


src/chrome/common/url_constants.cc:
+ const char kChromeUIHelloWorldURL[] = "chrome://hello-world/";
...
+ const char kChromeUIHelloWorldHost[] = "hello-world";

 


添加本地字符串
我们需要为新的资源添加新的本地化字符串。比如一个欢迎信息


src/chrome/app/generated_resources.grd:
+ <message name="IDS_HELLO_WORLD_TITLE" desc="A happy message saying hello to the world">
+   Hello World!
+ </message>

+ <message name="IDS_HELLO_WORLD_WELCOME_TEXT" desc="Message welcoming the user to the hello world page">
+   Welcome to this fancy Hello World page <ph name="WELCOME_NAME">$1<ex>Chromium User</ex></ph>!
+ </message>


添加处理chrome://hello-world/请求的WebUI类


下面我们增加一个新的类来处理新的资源。通常情况下,它是ChromeWebUI的一个子类(WebUI对话框则从HtmlDialogUI继承)


src/chrome/browser/ui/webui/hello_world_ui.h:
#ifndef CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_UI_H_
#define CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_UI_H_
#pragma once


#include "content/public/browser/web_ui_controller.h"


// The WebUI for chrome://hello-world
class HelloWorldUI : public content::WebUIController {
 public:
  explicit HelloWorldUI(content::WebUI* web_ui);
  virtual ~HelloWorldUI();
 private:
  DISALLOW_COPY_AND_ASSIGN(HelloWorldUI);
};


#endif  // CHROME_BROWSER_UI_WEBUI_HELLO_WORLD_UI_H_


src/chrome/browser/ui/webui/hello_world_ui.cc:
#include "chrome/browser/ui/webui/hello_world_ui.h"


#include "chrome/browser/profiles/profile.h"
#include "chrome/common/url_constants.h"
#include "content/public/browser/web_ui_data_source.h"
#include "grit/browser_resources.h"
#include "grit/generated_resources.h"


HelloWorldUI::HelloWorldUI(content::WebUI* web_ui)
    : content::WebUIController(web_ui) {
  // Set up the chrome://hello-world source.
  content::WebUIDataSource* html_source =
      new content::WebUIDataSource(chrome::kChromeUIHelloWorldHost);
  html_source->SetUseJsonJSFormatV2();


  // Localized strings.
  html_source->AddLocalizedString("helloWorldTitle", IDS_HELLO_WORLD_TITLE);
  html_source->AddLocalizedString("welcomeMessage", IDS_HELLO_WORLD_WELCOME_TEXT);


  // As a demonstration of passing a variable for JS to use we pass in the name "Bob".
  html_source->AddString("userName", "Bob");
  html_source->SetJsonPath("strings.js");


  // Add required resources.
  html_source->AddResourcePath("hello_world.css", IDR_HELLO_WORLD_CSS);
  html_source->AddResourcePath("hello_world.js", IDR_HELLO_WORLD_JS);
  html_source->SetDefaultResource(IDR_HELLO_WORLD_HTML);


  Profile* profile = Profile::FromWebUI(web_ui);
  content::WebUIDataSource::Add(profile, html_source);
}


HelloWorldUI::~HelloWorldUI() {
}

 

 

编译新的类,需要添加到工程的gyp文件中


src/chrome/chrome_browser_ui.gypi:
'sources': [
...
+   'browser/ui/webui/hello_world_ui.cc',
+   'browser/ui/webui/hello_world_ui.h',

 

 

添加WebUI请求到Chrome WebUI工厂
WebUI的工厂负责响应并创建你的请求


src/chrome/browser/ui/webui/chrome_web_ui_controller_factory.cc:
+ #include "chrome/browser/ui/webui/hello_world_ui.h"
...
+ if (url.host() == chrome::kChromeUIHelloWorldHost)
+   return &NewWebUI<HelloWorldUI>;

 

 

测试
OK!假定没有错误,你可以编译和运行chrome了。并在地址栏输入 chrome:://hello-world/ 你将看到欢迎信息。

 


增加回调处理句柄
你也许你问新的WebUI页面能够做些什么事情,或者从C++世界获取一些信息。为此,我们使用消息回调句柄。 假设我们不信任javascript引擎的两个整数相加(因为我们知道,它内部是使用浮点数的)。我们可以增加回调句柄来处理我们的整数运算。

 

 

src/chrome/browser/ui/webui/hello_world_ui.h:
#include "chrome/browser/ui/webui

补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,