第二个chrome插件:尝试基于websocket的分布式任务分发模式
in 后端前端 with 0 comment

第二个chrome插件:尝试基于websocket的分布式任务分发模式

in 后端前端 with 0 comment

0x00 先唠会嗑

这篇文章中提到的chrome插件原型,是为了采集某些网站的数据而制作的。

毕竟在浏览器窗口中采集比通过发送GET/POST请求分析响应结果、调用无头浏览器运行js、**数据加密接口来的更简单

具体代码不方便拿出来分享,只能聊一聊编写的思路。

0x01 流程图介绍

微信图片_20191211215027.png

图上客户端代表了安装了chrome插件的chrome浏览器。

具体流程如下:
1.控制台通过websocket服务器给客户端下发任务。
2.客户端打开时,chrome插件自动连接websocket服务器获取任务。
3.客户端采集之后发送到websocket服务器。
4.websocket服务器把获取到的采集内容存储到DB中

0x02 chrome插件

因为具体部分不方便说,所以这里就总结一下这次chrome插件开发中遇到的问题。

background-script.js和content-script.js间无法实现消息传递

最开始打算websocket是在background-script.js中发起链接的,这样可以保持长连接不会受网页关闭的影响而断开。测试的时候已经实现了在background-script.js中连接websocket,但是在background-script.js和content-script.js的消息传递中遇到了问题,两者居然无法互相通信?

经过查阅,我在chrome的官方文档中找到了如何在两者之间建立长连接(不是指websocket)的方法,但我在chrome(v78.0.3904.108)中并未成功建立链接。

// content-script.js
var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
  if (msg.question == "Who's there?")
    port.postMessage({answer: "Madame"});
  else if (msg.question == "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

// background-script.js
chrome.runtime.onConnect.addListener(function(port) {
  console.assert(port.name == "knockknock");
  port.onMessage.addListener(function(msg) {
    if (msg.joke == "Knock knock")
      port.postMessage({question: "Who's there?"});
    else if (msg.answer == "Madame")
      port.postMessage({question: "Madame who?"});
    else if (msg.answer == "Madame... Bovary")
      port.postMessage({question: "I don't get it."});
  });
});

最后只能退而求其次,在content-script.js发起websocket链接。(在background-script.js建立的好处是ws链接更隐秘,如果是在content-script.js中建立则会在F12控制台network - ws 中显示出来)

另外推荐在content-script.js中加入对window.onbeforeunload的监听(离开页面事件),websocket服务端在客户端断开时也要做好异常处理。有时候直接刷新页面会导致websocket服务器因为异常断开而崩溃(但nodejs写websocket还是香!)

window.onbeforeunload = function () {
    wsClient.close();  // 主动断开连接
}

popup的生命周期

原本以为popup的生命周期和background-script一致。测试后才发现popup的生命周期是浏览器右侧插件小图标点击后,菜单显示到消失的这个过程。关于content-script、background-script、popup之间的关系,可以参考这篇文章:【干货】Chrome插件(扩展)开发全攻略

0x03 websocket

这里用的是node-websocket这个包,非常的简单易用。可以按自己的需求拓展,后面可能会尝试写一个基于这个包的websocket框架,到时候会再开一篇写发明轮子的过程hhh。

控制台和客户端的账号区分

控制台登入时,用户标识为admin。

客户端的用户标识则是 36进制(时间戳+ip(replace掉dot符)+随机数字(100000-999999)),一般情况下这样足够得出一个够短且唯一的标识,如果想要更小的碰撞几率就不断放大随机数字的区间即可。


先写到这吧,月底前会再发一篇记账webapp的开发日记,也没什么想说的,提前给大家拜个早年吧!

Comments are closed.