javascript - 如何通过 Chrome 扩展程序保存网页的完整状态？

Question

页面的状态应该如何保存？

例如，假设用户正在浏览各种网页，其中一些可能编码如下:

onload=function(){
    let d_s = document.getElementById('d').style;
    d_s.width = d_s.height = Math.random() * 500 + 'px';
    setTimeout(onload, 800 + Math.random() * 800);
};

<div id=d style=background:skyblue;></div>
<!-- click Run ↓ -->

我想保存所选选项卡(整个选项卡 session )的当前状态并在将来恢复它们。

有哪些技巧可以做到这一点？

(这应该是可能的。毕竟，我们可以将一个选项卡从一个 Chrome 窗口拖到另一个 Chrome 窗口，即使在视频播放到一半时状态也不会发生任何变化。)

Answer 1

简而言之，没有。

这是非常雄心勃勃的，因为您不仅必须存储初始 DOM 状态(可以通过页面脚本加载随时更改)，而且还必须存储本地存储、cookie、 session 的状态，图像、脚本、样式表等 Assets ，不胜枚举。

如果您能够拍摄内存的低级别快照，将其存储在某处，然后稍后将其恢复到内存中，您可能有机会，因为这就是休眠所做的。但是，Chrome 或任何浏览器中都不存在此类 API。

即使在遇到任何技术挑战之前，这也会导致您在安装扩展程序以访问所有各种 API 时必须请求很多权限。

其次，假设您确实想出了序列化页面所有这些方面的方法，您将在哪里存储休眠状态？最好的选择是在后台页面上进行本地存储，但这通常有大小限制。

第三，您需要实际浏览到该页面，以便正确设置 URL。如果没有这一步，网页只会显示为已从休眠状态恢复，但如果用户尝试执行任何操作，他们将受到跨站点脚本 (XSS) 警告的攻击，并且刷新页面只会返回到空白选项卡.

最后，您一定会遇到几乎无限数量的边缘情况，这些情况是由您无法预测的特定于站点的细微差别引起的。