chrome扩展程序制作(四)—当前页面与插件后台通信

之前介绍了最小化chrome插件的编写,以及插件的后台应用和插件对当前页面的控制

接下来要讨论当前访问页面与插件页面之间的通信。

index.js修改为

$(document).ready(function(){
    chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        console.log(sender.tab ?
                    "来自内容脚本:" + sender.tab.url :
                    "来自扩展程序");
        if (request.greeting == "您好")
          sendResponse({farewell: "再见"});
    });
})

test.js修改为

$(document).ready(function(){
    console.log("内容脚本发送");
    chrome.runtime.sendMessage({greeting: "您好"}, function(response) {
      console.log(response.farewell);
    });
})

当我们开启插件,并访问网页时,查看通信示例效果

test.js首先发送数据“您好”,index.js监听消息事件,收到后先判断是扩展程序还是标签页发送的消息并打印在控制台,然后回复内容 再见,test.js回调函数收到反应并打印在控制台