Chrome Extension 通信机制

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月2日15:56:15 评论 558
最近这一段时间有些小忙,在做一款很有意思的Chrome Extension,在“创造”的过程中,对于Chrome Extension的机制有了很深入的了解,知道了很多它很有趣的事情,不过这篇文章主要是讲解一下关于其background,popup,content_script三者之间的通信机制。(至少我能保证这是时下最新的,网上搜索出来的内容,很多已经过期)在写之前,很有必要简单说明一下background,popup,content_script,options,四者的关系。最简单的理解就是:“popup和options是有界面的,background属于无界面的,content_script属于可注入在网页中的脚本”,基本上这些内容涵盖了Chrome Extension 人机交互的全部过程。

如图:

Chrome Extension 通信机制
Chrome Extension 通信机制

那么通信机制为什么要存在?那是因为有时候我们的逻辑可能会写在background中,假设你有一个popup的界面,在background中的处理逻辑,可以将处理结果发送给popup。或者在popup中需要往content_script发送一些数据,这个时候你依然要依赖background的来转发,这些在不同运行环境内的脚本,有一定的场景需要使用到通信,了解到这个通信机制之后,其实它是一个非常简单的事情,基本上我们只需要了解其中的两种模式即可:

  • 问答模式
  • long connect 模式

问答模式

我们可以想象一下一个请求的全部生命周期,从request开始到response结束,在这个模式中也是如此。

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {   
    // request 问的人发过来的消息    
    // sendResponse 将答发给问的人
})
// 问的人

chrome.runtime.sendMessage({}, (response) => {   
    // 处理
})

一般这种问答机制我们还需要额外加入一些处理过程,如:

{
   "action": "",
   "args": "",
   "id": ""
}

action用于描述处理的handler,args是问的人发来的消息,id属于幂等操作,定义这样的数据过程,在整个问答模式中,才能处理的很平稳。

long connect 模式

如果你了解过WebSocket那么对于这样的模式就会比较清楚,这个模式非常形象的和Websocket类似,它可以将消息体源源不断的发送给连接发起方。在long connect模式中,主要分为连接发起方和被动连接方,一般正常情况下,这个模式的被动连接方会写在background中,连接发起方可以写在popup中也可以写在content_script或options中,这样主要会根据你的业务逻辑而定。

// 被动连接方
chrome.runtime.onConnect.addListener((port) => {    
    switch (port.name) {      
        case COMM.FETCH_PIPE:
break;      
        default:        
            break;
}
});
// 连接发起方

let PORT = null;
PORT = chrome.runtime.connect({ name: COMM.FETCH_PIPE });
PORT.postMessage({ cmd: 'connect_pipe' });
PORT.onDisconnect.addListener(() => {  console.log('disconnect');
});
PORT.onMessage.addListener(() => {    
    const data = Object.create(null);
data[COMM.LOCAL_TABLE] = tempExtensionResponse;    
    storageSet(data).then(() => {      
        window.location.reload();
});
});

跟上一个模式类似,如果我们要在业务中平稳的使用,还需要自己定义一些数据结构来辅助的处理通信的Handler逻辑。

原文发布于微信公众号 - 子曰五溪(fed-talk)

原文发表时间:2018-08-04

im, 无色
  • 本文由 发表于 2019年7月2日15:56:15
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: