Chrome扩展程序：即使页面更改，也可以为选项卡存储变量答案

【问题标题】：Chrome extension : Storing variables for a tab even if page changesChrome扩展程序：即使页面更改，也可以为选项卡存储变量
【发布时间】：2014-08-12 02:56:28
【问题描述】：

我正在构建一个 Chrome 扩展程序。我想知道即使页面发生变化，是否有办法记住标签的 js 变量。例如。如果我在 example1.com 上并在同一个选项卡上转到 example2.com，我应该保留在 example1.com 上设置的变量。我不想使用 Chrome 存储。

我不能使用 localStorage 或 sessionStorage，因为 chrome 对不同的域有不同的存储。有哪些方法可以做到这一点？

【问题讨论】：

使用存储字符串化 JSON 的 cookie，它以页面的 URL 作为其键。
@RoryMcCrossan 我想我无法从 example2.com 访问在 example1.com 上设置的 cookie。
chrome 对不同的域有不同的存储。有哪些方法可以实现这一点答案是否定的，无论任何域，您的扩展程序的本地存储都是隔离的
@Mr.Alien 我说的是localStorage，据我所知localStorage对于不同的域名是不同的。我刚刚重新检查了它。
@user3763053 我已经开发了扩展，我也使用过localstorage，寻找chrome.storage，你就会明白我的意思

标签： javascript jquery google-chrome-extension storage

【解决方案1】：

使用本地存储。扩展在函数和变量存储中与页面完全隔离。您将需要在后台页面中使用 localstorage，因此当您更改选项卡时，该变量永远不会丢失。

【讨论】：

我正在使用内容脚本。您是说我将变量存储在扩展程序的背景页面中吗？是否允许内容脚本访问扩展的后台页面？

【解决方案2】：

除了使用localStorage（通过后台页面），您可以通过从内容脚本到后台页面的消息直接将这些变量保存在后台页面中。如果这些变量在扩展页面中（除了内容或注入脚本），您可以通过chrome.extension.getBackgroundPage().window.variableYouWant 方法轻松保存它们，并通过消息传递访问内容脚本本身中的这些变量。
如果这些变量在内容脚本中，则使用消息将这些变量发送到后台页面，如下所示：

chrome.runtime.sendMessage(object);

object 可以是您可能想要发送的任何对象。

在后台页面上有一个这样的 lisner：

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    myVariabeInBackground = message.yourObjectProperties;
});

当您需要这些变量时，您可以在扩展页面中使用chrome.extension.getBackgroundPage().window.myVariabeInBackground（内容脚本除外），或者您可以通过在后台页面本身调用chrome.tabs.sendMessage(tabId, messageObject) 将消息从后台页面发送到内容脚本并在内容中接收使用这样的侦听器编写脚本：

chrome.runtime.onMessage.addListener(
  function(request, sender) {}); //request is your sent object.

对于 localStorage，您也可以执行相同的操作将存储的变量放入您的内容脚本中。
不，您不能直接从内容脚本访问后台页面。

PS：如果重新加载扩展程序，后台页面中的变量将重置。如果您想在重新加载扩展后使用这些变量，请使用本地存储。扩展程序不会在浏览器操作时重新加载。

更多详情请阅读https://developer.chrome.com/extensions/messaging

【讨论】：

【解决方案3】：

您应该研究chrome.storage API 作为localStorage+Messaging 的替代方案。

与localStorage 相比，它是异步的，但消息传递也是如此，而仅用于变量存储的消息传递会导致大量样板文件。

在此处查看文档 here 和最近的 overview（由我撰写）的优点/缺点。

【讨论】：