欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

chromium 12 webui demo

程序员文章站 2022-07-01 12:46:55
...

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" />

chromium 12 webui demo

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>

chromium 12 webui demo

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",

chromium 12 webui demo

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

chromium 12 webui demo

chromium 12 webui demo

相关标签： chromium

上一篇： 包吃包住的清朝妃嫔，她们的月例银子有多少？

下一篇： 用什么东西可以将一间屋子填满

推荐阅读