使用 Chrome 扩展从网页获取变量 - 本地存储？答案

【问题标题】：Get variables from webpage with Chrome Extension - localstorage?使用 Chrome 扩展从网页获取变量 - 本地存储？
【发布时间】：2013-10-18 21:49:59
【问题描述】：

我正在构建一个用于映射页面的 Chrome 扩展程序。用户登录到地图，许多变量从数据库传递到地图中。

当扩展打开时，有没有办法将这些变量传递给它？我在考虑 LocalStorage：

作为测试，我在地图页面 HTML 中尝试了这个

if (typeof(Storage)!=="undefined") {
localStorage.setItem("firstname", "hello");
localStorage.setItem("lastname", "world");
}

然后在我刚刚尝试的扩展内容中

alert('My name is ' + localStorage.getItem("firstname") + ' ' +
localStorage.getItem("lastname"));

我可以在地图页面开发者工具中看到localstorage下的变量。但我在扩展中看到了不同的集合。

似乎扩展程序无法读取这些。有什么方法可以将这些发送过来，还是需要其他方法？

【问题讨论】：

能否包含用于检索变量的代码？
我只是尝试了另一种写入存储的方式（参见编辑后的代码），但它仍然返回“我的名字是 null null”。问题似乎是，如果我在控制台上查看 localstorage，页面是“Local Storage>www...”并包含变量。该扩展显示为“本地存储>Chrome 扩展：ghjghgjh ....”并显示一组不同的变量。所以我想我要问的是我可以从网页写入本地存储以获取扩展吗？
您正在使用的本地存储！= developer.chrome.com/extensions/storage.html。似乎有一些相当大的差异。
@PaulAston 我不知道您所做的更改是否与我的答案有关，但我删除了它，因为我发现这两种方法完全可以互换，我不知道。但是，我会推荐使用setItem() 和getItem()，这样您就不会意外覆盖任何属性或方法。我知道这与您的问题无关，但我认为值得注意。

标签： jquery google-chrome google-chrome-extension local-storage

【解决方案1】：

我认为您想要的是在 chrome 中传递消息。看这篇文章https://developer.chrome.com/extensions/messaging.html

基础应该是这样的

chrome.extension.getLocal({method: "getLocalStorage", key: "status"}, function(response) {
  console.log(response.data);
});

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocal"){
      sendResponse({data: localStorage[request.key]});
    }else{
      sendResponse({}); }
});

您还可以考虑使用 chrome 存储而不是本地存储 http://developer.chrome.com/extensions/storage.html

【讨论】：

是的，这是唯一的方法。为了安全起见，您不能仅访问注入网页的 dom 的存储或变量。除了消息传递，您还可以将其存储在 dom 中，这可能更容易。