以查询历史记录为例:

1.在上层history.js中通过chrome.send()来向底层发送事件请求和相关参数,其中'queryHistory'为信号名称,[this.searchText_, this.offset_, this.rangeInDays_, endTime, maxResults]为向底层传递的参数:

chrome.send('queryHistory',[this.searchText_, this.offset_, this.rangeInDays_, endTime, maxResults]);

2.在底层Browsing_history_handler.cc中通过RegisterMessages函数对上层发来的事件进行响应处理:

void BrowsingHistoryHandler::RegisterMessages() {
……
…… web_ui()->RegisterMessageCallback("queryHistory",
base::Bind(&BrowsingHistoryHandler::HandleQueryHistory,
base::Unretained(this))); ……
}

之后会在BrowsingHistoryHandler::HandleQueryHistory()函数中处理查询历史记录的事件响应。

3.处理完毕后,通过CallJavascriptFunction()调用上层js的方法并将需要返回的数据一并返回。

void BrowsingHistoryHandler::ReturnResultsToFrontEnd() {
……
……
web_ui()->CallJavascriptFunction(
"historyResult", results_info_value_, results_value);
……
}

4.之后上层指定的方法,即historyResult()即获得了最初指定查询的历史记录,并可继续做相关处理,以上完成一个完整的通信:

function historyResult(info, results) {
historyModel.addResults(info, results);
}

附:

拉取代码:git clone

强制恢复到某次提交的版本:git reset --hard

可参考:

http://blog.gclxry.com/chromium-webui/

chrome源码学习之:js与底层c++的通信的更多相关文章

  1. 源码学习之MyBatis的底层查询原理

    导读 本文通过MyBatis一个低版本的bug(3.4.5之前的版本)入手,分析MyBatis的一次完整的查询流程,从配置文件的解析到一个查询的完整执行过程详细解读MyBatis的一次查询流程,通过本 ...

  2. metamask源码学习-inpage.js

    The most confusing part about porting MetaMask to a new platform is the way we provide the Web3 API ...

  3. metamask源码学习-contentscript.js

    When a new site is visited, the WebExtension creates a new ContentScript in that page's context, whi ...

  4. metamask源码学习-background.js

    这个就是浏览器后台所进行操作的地方了,它就是页面也区块链进行交互的中间部分. metamask-background描述了为web扩展单例的文件app/scripts/background.js.该上 ...

  5. metamask源码学习-ui/index.js

    The UI-即上图左下角metamask-ui部分,即其图形化界面 The MetaMask UI is essentially just a website that can be configu ...

  6. Underscore.js 源码学习笔记(下)

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  7. 从Chrome源码看JS Array的实现

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...

  8. 【 js 基础 】【 源码学习 】源码设计 (持续更新)

    学习源码,除了学习对一些方法的更加聪明的代码实现,同时也要学习源码的设计,把握整体的架构.(推荐对源码有一定熟悉了之后,再看这篇文章) 目录结构:第一部分:zepto 设计分析第二部分:undersc ...

  9. Underscore.js 源码学习笔记(上)

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

随机推荐

  1. Java_DOM创建XML

    import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream; ...

  2. C++ 之 新式转型操作符

    四种新式转型: const_cast.dynamic_cast.reinterpret_cast.static_cast!! 1.const_cast  :  去除常量性 2.dynamic_cast ...

  3. STM32——assert_param(expr)

    在STM32的固件库和提供的例程中,到处都可以见到assert_param()的使用.如果打开任何一个例程中的stm32f10x_conf.h文件,就可以看到实际上assert_param是一个宏定义 ...

  4. JSHelper时间格式化

    Helper.prototype.FormatDate = function (format) { var _now = new Date(); var o = { "M+": _ ...

  5. 兼容性测试-如何使用IE11做低版本IE的兼容性测试

    操作步骤: 切换模式方法-按F12->展开显示->仿真菜单>在文档模式下拉框中选择IE版本

  6. java的数据类型转换

    java中有八种基本数据类型分别是字节型byte.整型int.短整型short.长整型long.单精度浮点型float.双精度浮点型double.字符型char.布尔型boolean.这些基本数据类型 ...

  7. 如何在静态博客hexo中只显示摘要信息

    默认情况下hexo博客(如本站)的首页显示的是完整的文章 – 而文章比较长的时候这无疑会带来诸多不遍. 那怎么样才能只显示个摘要呢? 方法说白了,其实很简单 – 只要加入一个<!-- more ...

  8. position属性的四个value

    As we all know, position属性有四个值,分别为 relative,fixed,absolute, static. 1,relative相对定位 (不会脱离文档流) 在一个相对定位 ...

  9. 使用java发送邮件

    首先要加入mail.jar包 import java.io.UnsupportedEncodingException; import java.util.Properties; import java ...

  10. redis基础总结

    Redis 数据类型: String Hash String类型: 一个key对应一个value,二进制安全的. set方法:设置对应值的value set name value get方法:获取对应 ...