chromium 12 webui demo

最新推荐文章于 2024-06-15 11:26:19 发布

longji

最新推荐文章于 2024-06-15 11:26:19 发布

阅读量1.2k

点赞数

分类专栏： chromium 文章标签： chromium

本文链接：https://blog.csdn.net/longji/article/details/81916609

版权

chromium 专栏收录该内容

56 篇文章 31 订阅

订阅专栏

01 参考资料

http://blog.gclxry.com/chromium-webui/

源码参考价值最大：

src\chrome\browser\ui\webui\welcome_handler.cc
src\chrome\browser\ui\webui\welcome_handler.h
src\chrome\browser\ui\webui\welcome_ui.cc
src\chrome\browser\ui\webui\welcome_ui.h
src\chrome\browser\resources\welcome\*

02 具体步骤

02.01 添加ui资源

资源统一放到src\chrome\browser\resources\test目录。
src\chrome\browser\resources\test\test.css

p {
  white-space: pre-wrap;
}

src\chrome\browser\resources\test\test.js

cr.define('test', function() {
  'use strict';

  function calc(){
    var item1 = document.getElementById( "first").value;
    var item2 = document.getElementById( "second").value;
    chrome.send('cpp_add', [item1, item2]);
  }

  function set_result(value){
    var input = document.getElementById( "result");
    input.value = value;
  }

  function initialize() {
    $('test-message').textContent = loadTimeData.getStringF('testMessage');

    $('url-params01').textContent = loadTimeData.getString('params_test01')

    document.getElementById("equal").onclick = calc;
  }

  return {
    initialize: initialize,
    set_result: set_result,
  };
});

document.addEventListener('DOMContentLoaded', test.initialize);

src\chrome\browser\resources\test\test.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>$i18n{testTitle}</title>
  <link rel="stylesheet" href="test.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="test.js"></script>
</head>
<body>
  <h1>$i18n{testTitle}</h1>

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

  <p id="url-params01"></p>

  <input type="text" id="first" /> + 
  <input type="text" id="second" />
  <button type="button" id="equal"> = </button>  
  <input type="text" id="result" />

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

02.02 管理文件类资源

src\chrome\browser\browser_resources.grd

      <include name="IDR_TEST_HTML" file="resources\test\test.html" allowexternalscript="true" type="BINDATA" />
      <include name="IDR_TEST_CSS" file="resources\test\test.css" type="BINDATA" />
      <include name="IDR_TEST_JS" file="resources\test\test.js" type="BINDATA" />

这里写图片描述

02.03 添加字符串类资源

src\chrome\app\generated_resources.grd

    <message name="IDS_TEST_TITLE" desc="A happy message saying test title">
      test title!
    </message>
    <message name="IDS_TEST_TEXT" desc="Message welcoming the user to the test page">
      Welcome to this test page
    </message>

这里写图片描述

02.04 添加c++控制代码

1 新增加的c++源文件，统一放在 src\chrome\browser\ui\webui\test 目录
src\chrome\browser\ui\webui\test\test_handler.cc

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#include "chrome/browser/ui/webui/test/test_handler.h"

#include "base/metrics/histogram_macros.h"
#include "base/metrics/user_metrics.h"
#include "chrome/browser/profiles/profile.h"
#include "chrome/browser/ui/browser.h"
#include "chrome/browser/ui/browser_finder.h"
#include "chrome/browser/ui/browser_navigator.h"
#include "chrome/browser/ui/profile_chooser_constants.h"
#include "chrome/common/url_constants.h"
#include "ui/base/page_transition_types.h"

TestHandler::TestHandler(content::WebUI* web_ui)
    : profile_(Profile::FromWebUI(web_ui)) {
}

TestHandler::~TestHandler() {

}

void TestHandler::RegisterMessages() {

  web_ui()->RegisterMessageCallback(
      "cpp_add",
      base::BindRepeating(&TestHandler::HandleCppAdd,
                          base::Unretained(this)));
}

void TestHandler::HandleCppAdd(const base::ListValue* args)
  {
    std::string s1,s2;
    if (!args->GetString(0, &s1) || !args->GetString(1, &s2))
      return;
    int n1 = 0, n2 = 0;
    base::StringToInt(s1.c_str(), &n1);
    base::StringToInt(s2.c_str(), &n2);
    base::Value result(n1 + n2);
    web_ui()->CallJavascriptFunctionUnsafe("test.set_result", result);
  }

src\chrome\browser\ui\webui\test\test_handler.h

// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#ifndef CHROME_BROWSER_UI_WEBUI_TEST_TEST_HANDLER_H_
#define CHROME_BROWSER_UI_WEBUI_TEST_TEST_HANDLER_H_

#include "base/macros.h"
#include "chrome/browser/ui/webui/signin/login_ui_service.h"
#include "content/public/browser/web_ui_message_handler.h"

class Browser;
class Profile;

// Handles actions on Welcome page.
class TestHandler : public content::WebUIMessageHandler {
 public:
  explicit TestHandler(content::WebUI* web_ui);
  ~TestHandler() override;

  // content::WebUIMessageHandler:
  void RegisterMessages() override;

 private:
  void HandleCppAdd(const base::ListValue* args);

  Profile* profile_;

  DISALLOW_COPY_AND_ASSIGN(TestHandler);
};

#endif  // CHROME_BROWSER_UI_WEBUI_TEST_TEST_HANDLER_H_

src\chrome\browser\ui\webui\test\test_ui.cc

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#include "chrome/browser/ui/webui/test/test_ui.h"

#include <memory>

#include "chrome/browser/profiles/profile.h"
#include "chrome/browser/ui/webui/test/test_handler.h"
#include "chrome/common/pref_names.h"
#include "chrome/grit/browser_resources.h"
#include "chrome/grit/chrome_unscaled_resources.h"
#include "chrome/grit/chromium_strings.h"
#include "chrome/grit/generated_resources.h"
#include "components/prefs/pref_service.h"
#include "content/public/browser/web_ui_data_source.h"
#include "net/base/url_util.h"
#include "ui/base/l10n/l10n_util.h"


TestUI::TestUI(content::WebUI* web_ui, const GURL& url)
    : content::WebUIController(web_ui) {
  Profile* profile = Profile::FromWebUI(web_ui);

  // // This page is not shown to incognito or guest profiles. If one should end up
  // // here, we return, causing a 404-like page.
  // if (!profile ||
      // profile->GetProfileType() != Profile::ProfileType::REGULAR_PROFILE) {
    // return;
  // }

  // // Store that this profile has been shown the Welcome page.
  // profile->GetPrefs()->SetBoolean(prefs::kHasSeenWelcomePage, true);

  web_ui->AddMessageHandler(std::make_unique<TestHandler>(web_ui));

  content::WebUIDataSource* html_source =
      content::WebUIDataSource::Create(url.host());

  html_source->AddLocalizedString("testTitle", IDS_TEST_TITLE);
  html_source->AddLocalizedString("testMessage", IDS_TEST_TEXT);

  std::string value;
  net::GetValueForKeyInQuery(url, "test01", &value);
  html_source->AddString("params_test01", value);
  html_source->SetJsonPath("strings.js");

  html_source->AddResourcePath("test.css", IDR_TEST_CSS);
  html_source->AddResourcePath("test.js", IDR_TEST_JS);
  html_source->SetDefaultResource(IDR_TEST_HTML);


  content::WebUIDataSource::Add(profile, html_source);
}

TestUI::~TestUI() {}

src\chrome\browser\ui\webui\test\test_ui.h

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#ifndef CHROME_BROWSER_UI_WEBUI_TEST_TEST_UI_H_
#define CHROME_BROWSER_UI_WEBUI_TEST_TEST_UI_H_

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

// WebUI chrome://test or chrome://test?variant=everywhere
class TestUI : public content::WebUIController {
 public:
  TestUI(content::WebUI* web_ui, const GURL& url);
  ~TestUI() override;
};

#endif  // CHROME_BROWSER_UI_WEBUI_TEST_TEST_UI_H_

2 记得在 src\chrome\browser\ui\BUILD.gn 工程配置文件中加入自己的文件

    "webui/test/test_handler.cc",
    "webui/test/test_handler.h",
    "webui/test/test_ui.cc",
    "webui/test/test_ui.h",

这里写图片描述

3 在 src\chrome\browser\ui\webui\chrome_web_ui_controller_factory.cc 文件中加入如下内容，启用TestUI。

A 头文件

#include "chrome/browser/ui/webui/test/test_ui.h"

B NewWebUI模板(参考WelcomeUI)

template <>
WebUIController* NewWebUI<TestUI>(WebUI* web_ui, const GURL& url) {
  return new TestUI(web_ui, url);
}

C 在GetWebUIFactoryFunction函数中加入对TestUI的支持(参考WelcomeUI)

  if (url.host_piece() == chrome::kChromeUITestHost)
    return &NewWebUI<TestUI>;

02.05 编译，测试

ninja -C out\Debug chrome

这里写图片描述

longji

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
13
评论
chromium 12 webui demo

01 参考资料http://blog.gclxry.com/chromium-webui/源码参考价值最大：src\chrome\browser\ui\webui\welcome_handler.ccsrc\chrome\browser\ui\webui\welcome_handler.hsrc\chrome\browser\ui\webui\welcome_ui.ccsrc\c...
复制链接

扫一扫