如何扩充浏览器的能力

常见的 JavaScript 接口暴露方式

Lu Yuan

2016-08-12

About

• 陆远 (weixin: luyuandotorg)
• 百度多模交互搜索部 (MMS)
• web 前端开发工程师

内容

• 为什么
• 哪些方法
• 如何实现

为什么要扩充浏览器的功能

• 实现新规范
• 使用中浏览器内核无法提供的能力
• 自定义扩展机制
• 第三方浏览器或 webview
• 集成其他宿主环境
• ...

浏览器中供 JavaScript 使用的原生功能的来源

• 脚本引擎 (ECMA, extension)
• 渲染引擎 (DOM, BOM, CSSOM, HTML5...) 
• 扩展 (浏览器扩展机制, devtools) 
• 引入的其他宿主环境 (Node...) 

从脚本引起进行扩展

• V8 Extension
  • window.chrome
    • loadtimes_extension
    • ...

增加纯 JavaScript 及原生接口

v8::Extension(kLoadTimesExtensionName,
      "var chrome;"
      "if (!chrome)"
      "  chrome = {};"
      "chrome.loadTimes = function() {"
      "  native function GetLoadTimes();"
      "  return GetLoadTimes();"
      "};"
      "chrome.csi = function() {"
      "  native function GetCSI();"
      "  return GetCSI();"
      "}") {}

对渲染引擎功能的扩充

• IDL
  • https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface
  • https://chromium.googlesource.com/chromium/src.git/+/master/third_party/WebKit/Source/core/timing/PerformanceTiming.idl​
• Implementation
  • PerformanceTiming.h
  • PerformanceTiming.cpp

增加一个 timing 属性

• IDL

  • readonly attribute unsigned long long firstLayout;

• Implementation
  •  

ScriptValue PerformanceTiming::toJSONForBinding
        (ScriptState* scriptState) const
{
    ...
    result.addNumber("firstLayout", firstLayout());
    return result.scriptValue();
}

扩展开发者工具

• monitorEvents, unmonitorEvents
  • ThreadDebugger

集成 Node

• Chromium + Node
  • nw.js -> node-webkit
  • heX
  • atom-shell -> Electron

Node 的构成

• node
  • V8
  • libuv
  • openssl
  • ...

Node 的启动过程

• Init (V8, libuv...)
• process
• load node.js
• start loop
• dispose and exit

加入 Node 的同步逻辑

• DidCreateScriptContext
  • init
  • process
  • start node.js
• WillReleaseScriptContext
  • dispose
  • exit

整合 Node 的异步

• heX
  • browser message loop (浏览器进程) 中通知 (IPC) uv_run_once (渲染进程)
• Electron
  • Node event loop in worker thread
  • run  the task in main thread

比较

谢谢