Chromium扩展（Extension）通信机制分析

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

       Chromium的Extension由Page和Content Script组成。如果将Extension看作是一个App，那么Page和Content Script就是Extension的Module。既然是Module，就避免不了需要相互通信。也正是由于相互通信，使得它们形成一个完整的App。本文接下来就分析Extension的Page之间以及Page与Content Script之间的通信机制。

老罗的新浪微博：http://weibo.com/shengyangluo，欢迎关注！

《Android系统源代码情景分析》一书正在进击的程序员网（http://0xcc0xcd.com）中连载，点击进入！

       从前面Chromium扩展（Extension）的页面（Page）加载过程分析和Chromium扩展（Extension）的Content Script加载过程分析这两篇文章可以知道，Extension的Page，实际上就是Web Page，它们加载在同一个Extension Process中，而Extension的Content Script，实际上是JavaScript，它们加载在宿主网页所在的Render Process中。这意味着Extension的Page之间，可以进行进程内通信，但是Page与Content Script之间，需要进行进程间通信。

       Chromium的Extension模块提供了接口，让Extension的Page与Page之间，以及Page与Content Script之间，可以方便地通信，如图1所示：

图1 Extension的通信机制

      Extension的Page之间的通信，表现为可以访问各自定义的JS变量和函数。例如，我们在前面Chromium扩展（Extension）机制简要介绍和学习计划一文中提到的Page action example，定义了一个Background Page和一个Popup Page。其中，Background Page包含了的一个background.js，它的内容如下所示：

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {     ......     var views = chrome.extension.getViews({
   type: "tab"});    if (views.length > 0) {      console.log(views[0].whoiam);    } else {      console.log("No tab");    }  });      ......    var whoiam = "background.html"

       它定义了一个变量whoiam，同时它又会通过Extension模块提供的API接口chrome.extension.getViews，获得在浏览器窗口的Tab中加载的所有Extension Page的window对象。假设此时Page action example在Tab中加载了一个Extension Page，并且这个Page也像Background Page一样定义了变量whoiam，那么Background Page就可以通过它的window对象直接访问它的变量whoiam。

       API接口chrome.extension.getViews除了可以获得在Tab中加载的Page的window对象，还可以获得以其它方式加载的Page的window对象。例如，在弹窗口中加载的Popup Page的window对象，以及在浏览器的Info Bar（信息栏）和Notification（通知面板）中加载的Page的window对象。可以通过type参数指定要获取哪一种类型的Page的window对象。如果没有指定，那么就会获得所有类型的Page的window对象。

      注意，API接口chrome.extension.getViews获得的是非Background Page的window对象。如果需要获得Background Page的window对象，可以使用另外一个API接口chrome.extension.getBackgroundPage。例如，我们在前面Chromium扩展（Extension）机制简要介绍和学习计划一文中提到的Page action example的Popup Page，包含有一个popup.js，它的内容如下所示：

document.addEventListener('DOMContentLoaded', function() {    getImageUrl(function(imageUrl, width, height) {      var imageResult = document.getElementById('image-result');      imageResult.width = width;      imageResult.height = height;      imageResult.src = imageUrl;      imageResult.hidden = false;        console.log(chrome.extension.getBackgroundPage().whoiam);    }, function(errorMessage) {      renderStatus('Cannot display image. ' + errorMessage);    });      ......   });    var whoiam = "popup.html" 

       它在Popup Page中显示图片时，就可以通过调用API接口chrome.extension.getBackgroundPage获得Background Page的window对象，然后通过这个window对象访问在Background Page中定义的变量whoiam。从前面的定义可以知道，这个变量的值等于“background.html”。

       总结来说，就是Extension的Page之间，可以通过chrome.extension.getViews和chrome.extension.getBackgroundPage这两个API接口获得对方的window对象。有了对方的window对象之后，就可以直接进行通信了。

       由于Extension的Page和Content Script不在同一个进程，它们的通信过程就会复杂一些。总体来说，是通过消息进行通信的。接下来我们以Popup Page与Content Script的通信为例，说明Extension的Page和Content Script的通信过程。

       在前面Chromium扩展（Extension）机制简要介绍和学习计划一文中提到的Page action example，它的Popup Page可以通过API接口chrome.tabs.sendRequest向Content Script发送请求，如下所示：

function testRequest() {      chrome.tabs.getSelected(null, function(tab) {         chrome.tabs.sendRequest(tab.id, {
   counter: counter}, function handler(response) {          counter = response.counter;        document.querySelector('#resultsRequest').innerHTML = "<font color='gray'> response: " + counter + "</font>";        document.querySelector('#testRequest').innerText = "send " + (counter -1) + " to tab page";      });      });    }    

       这个请求会被封装在一个类型为ExtensionHostMsg_PostMessage的IPC消息，并且发送给Browser进程。Browser进程会找到Page action example的Content Script的宿主网页所在的Render进程，并且将请求封装成另外一个类型为ExtensionMsg_DeliverMessage的IPC消息发送给它。

       Render进程收到类型为ExtensionMsg_DeliverMessage的IPC消息后，就会将封装在里面的请求提取出来，并且交给Content Script处理，如下所示：

chrome.extension.onRequest.addListener(      function(request, sender, sendResponse) {        sendResponse({
   counter: request.counter + 1 });      }  );  

       Content Script需要通过API接口chrome.extension.onRequest.addListener注册一个函数，用来接收来自Extension Page的请求。这个函数的第三个参数是一个Callback函数。通过这个Callback函数，Content Script可以向Background Page发送Response。

       Extension的Content Script同样也可以向Extension的Page发送请求。不过，它是通过另外一个API接口chrome.runtime.sendMessage进行发送的。例如，上述Page action example的Content Script就是通过这个接口向Background Page发送请求的，如下所示：

function testRequest() {      chrome.runtime.sendMessage({
   counter: counter}, function(response) {      counter = response.counter;      document.querySelector('#resultsRequest').innerText = "response: " + counter;      document.querySelector('#testRequest').innerText = "send " + (counter -1) + " to background page";    });  }  

       这个请求同样是先通过一个类型为ExtensionHostMsg_PostMessage的IPC消息传递到Browser进程，然后再由Browser进程通过另外一个类型为ExtensionMsg_DeliverMessage的IPC消息传递给Extension进程中的Background Page。

       Background Page需要通过API接口chrome.runtime.onMessage.addListener注册一个函数，用来接收来自Content Script的请求，如下所示：

chro