一、简介
Chromium是一个由Google主导开发的网页浏览器。以BSD许可证等多重自由版权发行并开放源代码。
Chromium和Chrome所使用的webkit内核和V8引擎，是公认的最快的网页浏览方式。使用Chromium开源代码（基于webkit内核）的浏览器有360极速浏览器、枫树极速浏览器、太阳花浏览器、世界之窗极速版、傲游浏览器和UC浏览器电脑版等。搜狗高速浏览器和qq浏览器官网未提及Chromium，只是说采用webkit内核，经网友测试这两款浏览器，极有可能也是使用的Chromium，只是官方不承认而已。
二、环境准备
1、下拉代码
可以参考文章：
Chromium源码学习（1）—— 拉取源码，编译-CSDN博客
官方文档https://chromium.googlesource.com/chromium/src/+/main/docs/windows_build_instructions.md
过程不再赘述，记住科学上网很重要。代码容量较大，完整约60多G，最新版约40多G，导出一个项目也需40多G，最好准备200G以上的储存空间。
2、准备编译环境
- Visual Studio 2022 (>=17.0.0) + 选中 “Desktop development with C++” component and the “MFC/ATL support”
- (Windows 11) SDK Debugging Tools 10.0.22621.755 or higher. Windows 11 SDK version 10.0.22621.2428
- Python3 (>=3.6)
- 最好也同时安装Visual studio code方便阅读和修改代码
3、导出项目
在拉取成功项目的src目录下运行，若运行不成功可能是是有些环境参数没有设置正确，可参考下拉代码节，文章1。
gn gen out\Default
此命令会在 src\out\Default目录下生成默认项目并包含一个名为all.sln的解决方案文件，用VS2022打开即可编译、执行。
三、项目目录结构
1、视图相关的目录结构
视图的基本框架Google View在 src\ui\base 和 view目录下
2、工具栏相关目录
浏览器工具栏相关的功能和按钮实现在src\chrome\browser\ui\views\toolbar目录下。
此目录下，定义了工具栏上的按钮并在tool_view.cc文件中实现在添加到工具栏视图上的功能。
四、创建Button文件
1、创建自定义Button文件和类
自定义按钮暂命名为huruan
在huruan_button.h文件中实现类定义，自定义类需继承自ToolbarButton基类，并实现SimpleMenuModel的委托接口。
// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
#ifndef CHROME_BROWSER_UI_VIEWS_TOOLBAR_HURUAN_BUTTON_H_
#define CHROME_BROWSER_UI_VIEWS_TOOLBAR_HURUAN_BUTTON_H_
#include "base/memory/raw_ptr.h"
#include "base/time/time.h"
#include "base/timer/timer.h"
#include "chrome/browser/ui/views/chrome_views_export.h"
#include "chrome/browser/ui/views/toolbar/toolbar_button.h"
#include "ui/base/metadata/metadata_header_macros.h"
#include "ui/base/models/simple_menu_model.h"
#include "ui/views/metadata/view_factory.h"
class CommandUpdater;
//
// HuruanButton
//
// The huruan button in the toolbar, which changes to a display a login window
// when clicked.
//
class HuruanButton : public ToolbarButton,
public ui::SimpleMenuModel::Delegate {
METADATA_HEADER(HuruanButton, ToolbarButton)
public:
enum class Mode { kReload = 0, kStop };
explicit HuruanButton(CommandUpdater* command_updater);
HuruanButton(const HuruanButton&) = delete;
HuruanButton& operator=(const HuruanButton&) = delete;在huruan_button.cc文件中实现各个函数功能。
void HuruanButton::ChangeMode(Mode mode, bool force) {
intended_mode_ = mode;
// If the change is forced, or the user isn't hovering the icon, or it's
// safe to change it to the other image type, make the change immediately;
// otherwise we'll let it happen later.
if (force || (!IsMouseHovered() && !testing_mouse_hovered_) ||
((mode == Mode::kStop) ? !double_click_timer_.IsRunning()
: (visible_mode_ != Mode::kStop))) {
double_click_timer_.Stop();
mode_switch_timer_.Stop();
SetVisibleMode(mode);
SetEnabled(true);
// We want to disable the button if we're preventing a change from stop to
// reload due to hovering, but not if we're preventing a change from
// reload to stop due to the double-click timer running. (Disabled reload
// state is only applicable when instant extended API is enabled and mode
// is NTP, which is handled just above.)
} else if (visible_mode_ != Mode::kReload) {
SetEnabled(false);
// Go ahead and change to reload after a bit, which allows repeated
// reloads without moving the mouse.
if (!mode_switch_timer_.IsRunning()) {
mode_switch_timer_.Start(FROM_HERE, mode_switch_timer_delay_, this,
&HuruanButton::OnStopToReloadTimer);
}
}
}
void HuruanButton::SetVectorIconsForMode(Mode mode,
const gfx::VectorIcon& icon,
const gfx::VectorIcon& touch_icon) {
switch (mode) {2、准备图标、字符串等相关资源
项目使用到的图标、图片、字符串等资源放在src\components目录下，图标、图形资源用Vector管理，字符串国际化用grit管理，相关用法请自行百度。
在huruan_button.cc文件的构造函数中，设置按钮的图标和字符串。
// HuruanButton ---------------------------------------------------------------
HuruanButton::HuruanButton(CommandUpdater* command_updater)
: ToolbarButton(base::BindRepeating(&HuruanButton::ButtonPressed,
base::Unretained(this)),
CreateMenuModel(),
nullptr),
command_updater_(command_updater),
//设置图标
huruan_icon_(vector_icons::kCertificateChromeRefreshIcon),
huruan_touch_icon_(kCreditCardIcon),
stop_icon_(kNavigateStopChromeRefreshIcon),
stop_touch_icon_(kNavigateStopTouchIcon),
double_click_timer_delay_(
base::Milliseconds(views::GetDoubleClickInterval())),
mode_switch_timer_delay_(base::Milliseconds(1350)) {
SetVisibleMode(Mode::kReload);
SetTriggerableEventFlags(ui::EF_LEFT_MOUSE_BUTTON |
ui::EF_MIDDLE_MOUSE_BUTTON);
//设置字符串
GetViewAccessibility().SetName(l10n_util::GetStringUTF16(IDS_ACCNAME_RELOAD));
SetProperty(views::kElementIdentifierKey, kReloadButtonElementId);
SetID(VIEW_ID_HURUAN_BUTTON);
}
五、在Toolbar在视图中添加Button
1、在Toolbar的View中添加Button
ToolbarView实现了多种功能
// The Browser Window's toolbar.
class ToolbarView : public views::AccessiblePaneView,
public ui::AcceleratorProvider,
public views::AnimationDelegateViews,
public LocationBarView::Delegate,
public CommandObserver,
public AppMenuIconController::Delegate,
public ToolbarButtonProvider,
public BrowserRootView::DropTarget {
METADATA_HEADER(ToolbarView, views::AccessiblePaneView)我们需要将自定义的按钮在toolbar_view.cc文件中添加到toolbarview的视图中。
// ADD FOR TEST
auto& GetViewCommandMap() {
static constexpr auto kViewCommandMap = base::MakeFixedFlatMap<int, int>(
{{VIEW_ID_BACK_BUTTON, IDC_BACK},
{VIEW_ID_FORWARD_BUTTON, IDC_FORWARD},
{VIEW_ID_HOME_BUTTON, IDC_HOME},
{VIEW_ID_RELOAD_BUTTON, IDC_RELOAD},
//添加静态定义
{VIEW_ID_HURUAN_BUTTON, IDC_HURUAN},
{VIEW_ID_AVATAR_BUTTON, IDC_SHOW_AVATAR_MENU}});
return kViewCommandMap;
}
//实例化
std::unique_ptr<HuruanButton> huruan =
std::make_unique<HuruanButton>(browser_->command_controller());
//按顺序添加
huruan_ = container_view_->AddChildView(std::move(huruan));
2、在其他位置添加Button功能
除在tool_view.cc文件中添加外，若要实现其他功能需要在其他文件中也实现一些功能函数，可能涉及的文件可参考下图。
六、编译测试运行
1、导出更新后的项目
在BUILD.gn文件中添加新增的项目文件，导出项目集。
gn gen out\vs22_dev
2、测试运行
在Vs2022中打开all.sln文件，编译运行就可以了。因我的机器是AMD的CPU，所以选了x64模式。
运行界面
src>out\vs22_dev\chrome 
七、参考文档
1、Chromium 源码学习-----UI界面_chromuim 右上角界面图-CSDN博客
2、https://www.chromium.org/developers/learning-your-way-around-the-code/
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
