如何通过 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 ? -->

我想保存所选选项卡的当前状态（整个选项卡会话）并在以后恢复它们。

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

（这应该是可能的。毕竟，我们可以将一个标签从一个 Chrome 窗口拖到下一个窗口，即使在播放视频中途也不会有任何状态变化。）

Answer 1

简而言之，没有。

这是令人难以置信的雄心勃勃，因为您不仅必须存储初始 DOM 状态（可以通过页面上的脚本加载随时更改），而且还必须存储本地存储、cookie、会话、图像等资产的状态、脚本、样式表，不胜枚举。

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

甚至在任何技术挑战之前，这将导致您在安装扩展程序以访问所有各种 API 时必须请求大量权限。

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

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

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