如何指示 Chrome 扩展程序在每次打开时不重新加载我的 HTML？答案

【问题标题】：How can I instruct Chrome Extension to NOT reload my HTML each time it is opened?如何指示 Chrome 扩展程序在每次打开时不重新加载我的 HTML？
【发布时间】：2014-10-16 15:36:14
【问题描述】：

我正在开发一个 Chrome 扩展程序，我需要它在每次打开时保持其状态。

例如，我有一个输入元素需要在我关闭并重新打开扩展程序后保持填充状态。

在this page 上，我找到了一个清单示例。它导致我将以下内容添加到我的清单中，但它不起作用：

"background": {
 "persistent": true,
"page": "popup.html"
}

有没有办法在开口之间保持扩展状态？

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

首先，阅读 Chrome 扩展的 Architecture Overview。

弹出式页面是一个“一次性”页面，仅在弹出式打开时才存在；你不能影响它。一旦弹出窗口失去焦点，它的 HTML 文档就会被销毁。

相比之下，只要 Chrome 运行，带有"persistent": true 的背景“页面”（通常没有 HTML 标记，因此通常使用 "scripts" 而不是 "page"）就存在。因此，它可以保存状态信息。但它是一个不可见的页面。

正确的方法是使弹出页面动态化，将其状态保存到后台和/或各种存储 API，并在打开时恢复状态。

小例子：

// popup.js
// Suppose #myInput is a text input
document.addEventListener('DOMContentLoaded', function() {
  chrome.storage.local.get({setting: "default value"}, function(data) {
    var inputElement = document.getElementById("myInput");
    inputElement.value = data.setting;
    inputElement.addEventListener("input", function(e) {
      chrome.storage.local.set({setting: e.target.value});
    });
  });
});

【讨论】：

感谢您的链接和信息。该链接特别有用。
@LeeLoftiss 有趣的是，我觉得我必须在我回答的一半问题中提供该链接。这必须是文档中更突出的部分，因为这基本上是理解一切工作原理所必需的阅读内容。
我同意。我所做的所有关于扩展的阅读，我以前从未注意到那个页面。在您的解决方案中，您使用了 chrome 存储。您是否建议也使用 HTML5 本地存储？我问主要是因为我想稍后为 Firefox 做一个扩展，这似乎可以减少我以后必须做的移植。
阅读another answer我给出的主题。简而言之，您可以在扩展页面中使用localStorage，但不能在内容脚本中使用。
我明白了。谢谢。我认为根据我的需要，HTML5 localStorage 将起作用。