Chrome扩展开发：内容脚本修改页面回滚，如何创建临时HTML或保留修改状态？

• 第一版Blob URL跳转方案失效的原因：Blob URL的生命周期和生成它的文档上下文强绑定，当用户点击外部链接跳转后，原页面的上下文会被浏览器回收，对应的Blob URL自然失效，返回时无法加载之前的修改内容。
• 第二版本地HTML文件方案失效的原因：Chrome的安全策略明确禁止普通网页/内容脚本直接加载file://协议的本地资源，就算你通过扩展API把修改后的HTML下载到本地磁盘，内容脚本的权限边界也无法直接读取这类本地文件，触发的Not allowed to load local resource报错是浏览器硬安全限制，无法通过普通配置绕过。

完全不需要搭后端服务，基于Chrome扩展的原生能力就能实现状态保留，推荐按改动成本从低到高选择：

方案1：扩展持久化存储 + 返回时DOM快照还原 #

这是改动最小、最贴合现有开发逻辑的实现方式：

• 完成DOM修改后，立刻把修改后的完整页面HTML通过document.documentElement.outerHTML序列化，以当前页面原始URL为key，存在chrome.storage.local里。这个存储是扩展进程级别的，不会跟着普通页面的跳转、上下文回收被销毁。
• 给内容脚本增加页面加载监听逻辑：当检测到当前页面的原始URL对应的存储快照存在，且本次访问是从外部链接跳转返回的（可以通过performance.navigation.type判断导航类型），就直接把存储的HTML替换掉当前页面的原始DOM。
• 配套增加快照清理逻辑：比如设置7天的过期时间，自动删除超过时效的旧快照，避免占用过多本地存储空间。

方案2：扩展内置视图页替代本地临时文件 #

绕开file://协议的限制，完全不需要真的把HTML文件下载到磁盘：

• 不用调用chrome.downloadsAPI生成本地文件，把序列化后的修改版HTML存在chrome.storage.session里，这个存储在扩展的会话周期内不会丢失。
• 在扩展的安装包里新建一个内置的视图页（比如modified-view.html），这个页面的逻辑非常简单：加载时从chrome.storage.session读取存储的HTML快照，直接写入自身的document对象即可。
• 当用户点击修改后页面的超链接时，拦截链接的默认跳转行为：先把当前的HTML快照存好，再跳转到目标链接。用户从外站点返回时，会先加载扩展内置的视图页，自动还原你修改后的DOM状态，不会回到未修改的原始版本。

方案3：History API 拦截返回导航 #

轻量实现状态保留，不需要额外的存储逻辑：

• 每次完成DOM修改后，把当前序列化的HTML快照存在history.state对象里，同步执行history.pushState写入当前导航状态。
• 监听popstate事件：当用户点击浏览器返回按钮时，阻止默认的页面重载行为，直接把存在对应state里的HTML快照还原到当前页面，从根源上避免页面重新加载原始版本的DOM。

注意：不要尝试通过给扩展加file://访问权限的方式去加载本地临时HTML，这类权限不仅容易触发Chrome应用商店的审核驳回，还会给用户带来不必要的本地文件访问安全风险。

内容的提问来源于stack exchange，提问作者Redwings