google 浏览器chrome 的扩展或者app开发,大部分功能通过js+html+css完成。然而js并不能实现对操作系统的底层操作,例如读取文件,发送网络请求等。
chrome浏览器发明了一种非常好的编程思维,同时也被现在很多编程模式借鉴,例如 跨平台开发 的electron ,用js开发桌面应用,也是借助electron进程,让js能访问到操作系统底层通讯,例如打开一个windows窗口,给操作系统右下角弹出一个消息框等待;
这里主要讲解一下 chrome的 js和c++底层进程进行通讯完成一些复杂功能的 原理进行描述。
以查询历史记录为例:
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