chrome extension 与网页、服务器交互的思考

目前插件与网页的交互方式有

Content Script 通信：（外部网页）

将插件JS 注入网页中监听网页的行为

目前采用的是插件JS 注入网页监听网页的postmessage 消息，网页的JS主动发送postmessage 消息

Window.postMessage()：（插件内部网页）

当网页是在Chrome Web扩展的弹出式页面（Popup）或者选项页面（Options）中打开时，可以使用window.postMessage()方法进行跨域通信

使用后台轮询：（插件打开的网页）

如果网页和插件之间无法直接通信，你可以在插件的Background Script中定期轮询网页的状态。例如，可以使用chrome.tabs.executeScript()函数注入脚本到网页中，原理与content script一致，但是更加麻烦，资源消耗更大

插件与服务器的通讯方式有：

长轮询（占用服务器资源）

在长轮询中，插件的 Background Script 向服务器发送一个长时间的 HTTP 请求，服务器一直保持连接打开，直到有新数据或通知时才响应请求。然后，插件收到响应后，再立即发起下一个长轮询请求，以保持持续的连接。

长连接（占用服务器资源）

websocket

双向长连接，能够实现插件向服务器推送消息，服务器向插件推送消息，但是连接过多会对服务器造成较大压力

Server-Sent Events (SSE)

基于长连接，单向通讯，即服务器向插件推送消息，管理比较轻量级

SSE 的工作原理如下：

客户端（浏览器）通过向服务器发送一个普通的 HTTP 请求，请求的头部包含 Accept: text/event-stream，告诉服务器希望接收 SSE 事件流。

服务器接收到 SSE 请求后，会将连接保持打开，并在需要的时候向客户端发送事件流（Event Stream）。

服务器发送的事件流使用简单的纯文本格式，每个事件以 data: 开头，后跟具体的数据内容。事件之间使用一个空行分隔。

客户端收到服务器发送的事件流后，可以通过监听 message 事件来处理每个事件的数据。

当服务器没有新的事件发送时，连接会保持打开，客户端仍然处于接收事件的状态。

SSE 的特点和优势：

实时性：SSE 允许服务器主动向客户端推送数据，使得客户端可以实时接收更新，无需轮询服务器。

简单易用：相比于 WebSocket，SSE 使用简单的纯文本格式，实现起来更加直观和易于理解。

高兼容性：大部分现代浏览器都支持 SSE，即使在不支持 SSE 的浏览器中，也会作为普通的 HTTP 请求处理。

轻量级：SSE 是一种轻量级的实时通信技术，适用于低频率和简单的实时通信场景。

需要注意的是，由于 SSE 是单向通信，即服务器向客户端发送消息，客户端不能主动向服务器发送消息，因此适用于一些只需要服务器向客户端推送数据的场景。如果需要客户端和服务器之间的双向通信，WebSocket 可能是更适合的选择。

推送（不占用自己服务器资源，直接使用google 的服务）

实际的工作原理是通过google 自己的服务向插件推送消息，基本流程是服务器向Google 的FCM推送消息，FCM再向插件推送消息，插件接收到消息后去处理。

（具体能不能做到，怎么做还需要调研，能确定的是要申请google 的FCM ，插件需要增加GCM的权限）

FCM 消息简介  |  Firebase Cloud Messaging (google.cn)

chrome.gcm - Chrome 开发者