javascript - 浏览器插件开发如何做到热更新?

Question

目前还是使用比较原始的方式开发,就是写好代码后打包,然后更新插件,这样是比较麻烦的。
想问一下在浏览器插件开发中现在有没有比较成熟的方案,可以实现开发的热更新

Answer 1

我目前用 Vite + @crxjs/vite-plugin，效果还不错，可以实现热更新。

不过当 manifest 更新的时候可能需要手动加载刷新。

Answer 2

一般来说，浏览器插件开发要做到热更新，可以利用WebSocket 或者 HTTP/2 协议进行实时通信，以实现代码或配置的热更新。以下是详细的方法：

1. 使用 WebSocket 协议：

WebSocket 是一种网络通交互协议，允许服务器与客户端之间进行全双工通信。你可以建立一个 WebSocket 服务器，插件定期通过 WebSocket 向服务器发送心跳包，保持与服务器之间的连接。当服务器有新的代码或配置需要更新时，可以发送一个包含新代码或配置的消息给客户端。客户端在接收到消息后，可以使用动态加载 JavaScript 或 JSON 的方式来更新插件的代码或配置。

这种方法的优点是实时性比较高，能够在服务器有更新时立即推送给客户端。但是，这种方法也有一些局限性，例如 WebSocket 连接可能会因为各种原因断开，所以需要设计好重连机制。

2. 使用 HTTP/2 协议：

HTTP/2 是 HTTP 的升级版，它引入了服务器推送（Server Push）的特性。你可以利用这个特性，当服务器有新的代码或配置时，主动推送给客户端。客户端在接收到消息后，同样可以使用动态加载 JavaScript 或 JSON 的方式来更新插件的代码或配置。

这种方法的优点是能够在服务器有更新时就推送给客户端，而且不需要建立额外的连接。但是，这种方法也有一些局限性，例如 HTTP/2 的服务器推送可能会因为各种原因失败，所以需要设计好重试机制。

以上两种方法都需要考虑如何处理不同版本之间的差异，以及如何保证更新的原子性。同时，你还需要考虑如何防止恶意用户通过更新代码或配置来破坏你的插件。因此，在实现热更新时，需要谨慎考虑各种可能的问题，并设计好相应的解决方案。