【DeepSeek-V4+claude】AI太厉害了，使用DeepSeek-V4+claude开发一个简单的浏览器，使用webkit+wxWidgets实现

wxBrowser 设计方案

基于 wxWidgets 3.2 + WebKit2 的 C++ 浏览器。 wxwidgets.org/ github.com/WebKit/WebK…

在这里插入图片描述参考视频：【AI太厉害了，使用DeepSeek-V4+claude开发一个简单的浏览器，使用webkit+wxWidgets框架C++代码实现，通过实战项目掌握claude】

技术栈

组件	版本
wxWidgets	3.2.0 (GTK3)
webkit2gtk	2.42.5 (webkit2gtk-4.0)
编译器	g++ 11.4 (C++17)
构建	CMake 3.22

项目结构

wxBrowser/
├── CMakeLists.txt
├── main.cpp
└── build/
    └── wxBrowser

架构

BrowserApp (wxApp)
  └── BrowserFrame (wxFrame)
        ├── TopPanel (wxPanel)
        │     ├── Back      (wxButton)
        │     ├── Forward   (wxButton)
        │     ├── Refresh   (wxButton)
        │     ├── URL Input (wxTextCtrl)
        │     └── DevTools  (wxButton)
        └── WebView (wxWebView → WebKitWebView)

核心设计

1. 地址栏输入

wxTextCtrl + wxTE_PROCESS_ENTER 样式，回车触发导航。自动补全 https:// 前缀。

void OnUrlEnter(wxCommandEvent&) {
    wxString url = m_urlInput->GetValue();
    if (url.Find("://") == wxNOT_FOUND)
        url = "https://" + url;
    m_webView->LoadURL(url);
}

2. 浏览器导航

后退/前进按钮通过 wxWebView::CanGoBack() / CanGoForward() 动态控制启用状态，OnNavigated 事件中更新。

void OnNavigated(wxWebViewEvent& evt) {
    m_urlInput->SetValue(evt.GetURL());
    m_backBtn->Enable(m_webView->CanGoBack());
    m_forwardBtn->Enable(m_webView->CanGoForward());
    evt.Skip();
}

3. 点击跳转修复

WebKit2 对 target="_blank" 链接和 window.open() 调用发出 create-web-view 信号，wxWebView 将其转为 wxEVT_WEBVIEW_NEWWINDOW 事件。若未绑定处理函数，导航被静默丢弃。

void OnNewWindow(wxWebViewEvent& evt) {
    m_webView->LoadURL(evt.GetURL());
}

4. WebKit2 Settings 初始化

通过 GetNativeBackend() 获取原生 WebKitWebView*，直接设置 WebKit2 Settings：

void SetupWebKit() {
    WebKitWebView* wkv =
        static_cast<WebKitWebView*>(m_webView->GetNativeBackend());
    WebKitSettings* settings = webkit_web_view_get_settings(wkv);
    webkit_settings_set_enable_developer_extras(settings, TRUE);
    webkit_settings_set_enable_javascript(settings, TRUE);
    webkit_settings_set_javascript_can_open_windows_automatically(settings, TRUE);
}

设置项	作用
`enable-developer-extras`	启用 Web Inspector 支持
`enable-javascript`	确保 JS 可用
`javascript-can-open-windows-automatically`	允许 JS 触发新窗口导航

5. DevTools 控制台

通过原生 WebKit2 API 切换 Web Inspector：

void OnToggleDevTools(wxCommandEvent&) {
    WebKitWebView* wkv =
        static_cast<WebKitWebView*>(m_webView->GetNativeBackend());
    WebKitWebInspector* inspector = webkit_web_view_get_inspector(wkv);
    if (webkit_web_inspector_is_attached(inspector))
        webkit_web_inspector_close(inspector);
    else
        webkit_web_inspector_show(inspector);
}

6. 事件绑定总览

事件	来源	处理函数
`wxEVT_TEXT_ENTER`	地址栏回车	`OnUrlEnter`
`wxEVT_BUTTON`	Back 按钮	`OnBack`
`wxEVT_BUTTON`	Forward 按钮	`OnForward`
`wxEVT_BUTTON`	Refresh 按钮	`OnRefresh`
`wxEVT_BUTTON`	DevTools 按钮	`OnToggleDevTools`
`wxEVT_WEBVIEW_NAVIGATED`	WebView 导航完成	`OnNavigated`
`wxEVT_WEBVIEW_NEWWINDOW`	WebView 新窗口请求	`OnNewWindow`

构建

依赖安装

sudo apt install libwxgtk3.2unofficial-dev \
                 libwxgtk-webview3.2unofficial-dev \
                 libwebkit2gtk-4.0-dev \
                 cmake g++

编译

# 动态链接（默认）
cmake .. && make -j$(nproc)

# 静态链接（需安装对应 .a 库）
cmake .. -DSTATIC_BUILD=ON && make -j$(nproc)

运行

cd build && ./wxBrowser