Chrome 浏览器前端与客户端双向通信实战

        Chrome 前端(即页面 JS / Web UI)与客户端(C++ 后端)的交互机制,是 Chromium 架构中非常核心的一环。下面我将按常见场景,从通道、流程、技术栈几个角度做一套完整的分析,特别适合你这种在分析和改造浏览器底层的开发者。


🔧 典型交互场景分类

场景描述技术路径
1️⃣ WebUI 页面与 C++ 后端交互如设置页、扩展页等WebUI <-> WebUIMessageHandler
2️⃣ 页面 JS 与 Extension 后端如插件调用 chrome.runtime.sendMessageJS <-> Mojo / native extension API
3️⃣ 页面 JS 与 Native 功能交互如调用浏览器硬件能力JS <-> Mojo / C++ Impl


📍 框架组件总览图


1️⃣ WebUI 页面交互机制详解

▶ 构成组件

  • 前端:WebUI HTML + JS 页面,嵌入在 chrome://browser://

  • 后端:继承自 content::WebUIController + WebUIMessageHandler

▶ 流程详解

  1. 前端 JS 发起调用

    chrome.send("MyFunctionName", [arg1, arg2]);
  2. 后端 C++ 注册 handler

    void MyHandler::RegisterMessages() override {
      web_ui()->RegisterMessageCallback(
          "MyFunctionName",
          base::BindRepeating(&MyHandler::OnMyFunction, base::Unretained(this)));
    }
    
    void MyHandler::OnMyFunction(const base::Value::List& args) {
      // 处理参数,回调 JS
      FireWebUIListener("on-data-ready", data);
    }
  3. 后端回调前端

    cr.addWebUIListener("on-data-ready", (data) => { ... });

▶ 应用场景

  • 设置页 (chrome://settings)

  • 下载页、扩展页、历史页等


2️⃣ Extension 与 Native 通信机制

▶ 构成组件

  • JS:使用 chrome.runtime.sendMessagechrome.extension.getBackgroundPage()

  • 后端:继承 ExtensionFunction 并注册到 ExtensionFunctionRegistry

▶ 流程示意

chrome.runtime.sendMessage({cmd: "doSomething"}, function(response) {
  console.log("Response:", response);
});

// C++ Extension Function 实现
class DoSomethingFunction : public ExtensionFunction {
 public:
  ResponseAction Run() override {
    // 处理逻辑...
    return RespondNow(OneArgument(base::Value("OK")));
  }
};

// 注册宏
EXTENSION_FUNCTION_NAME("extensionInternal.doSomething")

✅ Chrome 扩展调用的是基于 IPC 和 Mojo 的通道,最终由浏览器进程分发请求到对应 ExtensionFunction。


3️⃣ Mojo 通信机制(JS <-> Mojo <-> C++)

适用于较底层的交互,如性能数据、打印、系统 API 等。

▶ 构成组件

  • 前端:JS Binding(*.mojom-webui.js

  • 后端:C++ Mojo Impl(绑定接口实现)

  • 通道:RenderFrameHost->GetRemoteInterfaces() or WebUIDataSourceWithMojo

▶ 示例流程

// JS 侧
mojo.bindInterface('my_namespace.MyInterface');
myInterface.doSomething().then((result) => { ... });

// mojom 定义
interface MyInterface {
  DoSomething() => (string result);
}

// C++ 实现并绑定
class MyInterfaceImpl : public mojom::MyInterface {
 public:
  void DoSomething(DoSomethingCallback callback) override {
    std::move(callback).Run("Done!");
  }
};

web_ui()->BindInterface(std::make_unique<MyInterfaceImpl>());

🔄 JS 与 C++ 通信方式对比总结

通信方式特点适用场景
chrome.send()简单、基于 WebUI Message内部页面(如 chrome://*
chrome.runtime.sendMessage()基于扩展 IPC,功能强大插件调用浏览器能力
Mojo模块化、高性能、支持多进程深层系统通信(如 Debug、音频)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ปรัชญา แค้วคำมูล

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值