如何保存具有 JavaScript 执行结果的页面状态并在以后恢复？

Question

我正在为 YouTube 开发 chrome 扩展程序。该扩展程序编写具有不同行为的替代字幕。字幕文件由 link.

从 YouTube 获取

为了能够在视频开始播放时显示字幕，我必须在视频加载前下载字幕文件。在低网速下，JSON 个字幕文件与 YouTube 页面同时加载很长时间。

我使用这种方法。为了防止我的扩展程序与 YouTube 脚本竞争，我的扩展程序：

在页面加载开始时调用 window.stop()。
停止下载后，我下载我需要的文件。
然后扩展重新加载页面。

但如果 window.history 中有条目，我不想重新加载页面。当然，我只想通过 window.renderPause() 阻塞页面渲染线程，然后通过 window.renderResume() 恢复。我不会使用 window.stop()。但是JavaScript不提供这样的机会。如何保存具有 JavaScript 执行结果的页面状态并在以后恢复？此代码不适用于 youtube。 JavaScript YouTube 无法启动。

let clonedHtml = document.documentElement.cloneNode(true);
let clonedWindow = Object.assign({}, window);
document.documentElement.innerHTML = "";
window = clonedWindow;
document.replaceChild(clonedHtml, document.documentElement);

我无法使用 window.history.back() 或 window.history.forward()，因为 window.stop() 不允许加载页面。

Answer 1

是否要阻止视频在您的字幕文件加载之前开始播放？恢复页面状态本身会非常复杂，没有适用于所有网站的通用解决方案。

要在加载 YouTube 脚本之前加载字幕：

使用[chrome.webRequest.onBeforeRequest][1]，将youtube的字幕URL替换成你自己的字幕URL（或请求后替换文件内容）
Checkout this answer 挂钩页面加载事件，您可以在加载其他内容之前获取并注入字幕。

这两种方法都不需要额外的页面重新加载。 [1]: https://developer.chrome.com/docs/extensions/reference/webRequest/

如何保存具有 JavaScript 执行结果的页面状态并在以后恢复？

How do I save the page state with JavaScript execution results and restore it later?

html

javascript

google-chrome-extension

html5-history