手写一个极简Chromium浏览器

作为一个PC客户端开发老兵，带你用300行代码理解Chromium架构

背景

很多同学想学习Chromium内核，但面对几千万行代码望而却步。今天我带大家用最简单的方式，实现一个”类Chromium”浏览器，核心代码只有约300行。

技术选型

为什么选择WebView2？

  • 微软官方提供的Chromium嵌入控件
  • 保留Chromium核心能力（JS引擎、渲染、网络）
  • API简单易学
  • 不需要了解Chromium内部复杂架构

vs 完整Chromium

特性 完整Chromium 我们的极简版
代码量 千万行 ~300行
进程数 多个 1个
编译时间 小时级 秒级
学习曲线 陡峭 平缓

核心实现

1. 窗口创建

1
2
3
4
5
6
7
8
9
// 创建主窗口
g_hwnd = CreateWindowExW(
    0, kClassName,
    L"MiniChromium",
    WS_OVERLAPPEDWINDOW,
    CW_USEDEFAULT, CW_USEDEFAULT,
    1200, 800,
    nullptr, nullptr, hInstance, nullptr
);

2. WebView2初始化

1
2
3
4
5
6
7
8
9
10
11
12
// 创建WebView2环境
ICoreWebView2Environment* env = nullptr;
CreateCoreWebView2Environment(IID_PPV_ARGS(&env));

// 创建WebView2窗口
env->CreateCoreWebView2Window(
    g_hwndWebView,
    IID_PPV_ARGS(&g_webView)
);

// 导航到URL
g_webView->Navigate(L"https://www.baidu.com");

3. 完整代码

查看完整源码

编译运行

1
2
3
4
5
6
7
8
9
# 克隆项目
git clone https://github.com/shangsh/chromium-mini-browser.git

# 编译
cd chromium-mini-browser
build.bat

# 运行
bin\MiniChromiumBrowser.exe

架构图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
┌─────────────────────────────────────┐
│         Browser Process             │
│  ┌─────────────────────────────┐    │
│  │     Win32 Main Window      │    │
│  │  ┌───────────────────────┐  │    │
│  │  │   Toolbar + URL Bar   │  │    │
│  │  └───────────────────────┘  │    │
│  │  ┌───────────────────────┐  │    │
│  │  │   WebView2 (Chromium)│  │    │
│  │  │   - 渲染进程          │  │    │
│  │  │   - JavaScript引擎   │  │    │
│  │  │   - 网络栈            │  │    │
│  │  └───────────────────────┘  │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘

扩展挑战

完成基础功能后，可以尝试：

  1. 多标签页：使用Tab控件管理多个WebView2
  2. 书签管理：实现收藏功能
  3. 下载管理：监听下载事件
  4. 开发者工具：集成DevTools协议

总结

通过这个极简版浏览器，我们可以用最少的代码理解：

  • Win32窗口和消息循环
  • COM接口基本概念
  • WebView2 API使用
  • Chromium架构入门

这为后续深入学习Chromium内核打下坚实基础。

项目地址: https://github.com/shangsh/chromium-mini-browser

有问题欢迎评论区交流~