从 Chrome 扩展程序访问网页的 localStorage？

Question

我有一个网页和一个为该网页构建的 Chrome 扩展程序。

一旦用户成功登录我的网站。 我触发了这个：

 localStorage.app_isLoggedIn = true;
 localStorage.app_loggedInTimeStamp = new Date();

---

（我验证了这一点：保存成功）

---

Chrome 扩展详情

清单文件：

{

"manifest_version" : 2 ,

"name" : "app",
"description" : "Welcome to app",

"version" : "1.0",

"browser_action" : {

        "default_icon" : "app.png",
        "default_popup" : "popup.html"
},

 "background": {
            "page": "background.html"
},

"permissions" : [
         "storage",
         "background",
         "tabs"
],

"web_accessible_resources" : [
"*.html",
"*.js"
]


}

============

authenticate.js - 这是我页面上的第一个脚本文件（popup.html）

// create to authenticate weather app has been logged in recently or not
// IF NOT LOGGED IN: the user should be redirected to app web page
// IF LOGGED IN: the plugin would proceed

var _MIN_PER_DAY = 1000 * 60;

// a and b are javascript Date objects
function dateDiffInHours(a, b) {
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

return Math.floor((utc2 - utc1) / _MIN_PER_DAY);
}


// MECHANISM USED : HTML 5 Local storage

var maxDaysToGoWithoutLogin = 5; // default : has to be configurable
var maxHoursToGoWithoutLogin = maxDaysToGoWithoutLogin * 24; // default : has to be configurable
var st = localStorage.app_isLoggedIn;
var timeStamp = localStorage.app_loggedInTimeStamp;
console.log("status" + st + " ---- timestamp " + timeStamp);
if (st != undefined && st != "undefined" && st != null && st != 'null' && timeStamp != undefined && timeStamp != "undefined" && timeStamp != null && timeStamp != "null") {
console.log("status and stamps correct");
// the user is logged in 
// now check for time stamp
var localStorageTimeStampForLastLogin = new Date(localStorage.app_loggedInTimeStamp);

var diff = dateDiffInHours(localStorageTimeStampForLastLogin, new Date());
alert(diff);
alert(maxHoursToGoWithoutLogin);
if (diff > maxHoursToGoWithoutLogin) {
    // EXPIRED : requires relogin
    chrome.tabs.create({ url: "https://app.in" });
} else {
    // success : the plugin would proceed
}
} else {
chrome.tabs.create({ url: "https://app.in" });
}

之后，我点击我的 Chrome 扩展程序。

我想要的行为

Chrome 插件应该检查​​我在登录应用程序时保存的 HTML 5 本地存储变量。

如果用户没有登录到我的应用程序：那么用户应该被重定向到我的网络应用程序。

如果用户登录到我的应用程序：插件应该会弹出并且插件现在会显示我的应用程序数据。

问题

Chrome 扩展程序无法访问我的应用程序设置的本地存储。 （以上控制台消息输出）

statusundefined ---- timestamp undefined 

当我检查插件弹出窗口的本地存储时，我会在我的 chrome 开发工具中得到它。

localStorage
Storage {length: 0}

请看：我不认为这个链接是我的用例 Chrome extension: accessing local storage in content script

Answer 1

我假设您正在尝试访问当前活动标签的localStorage。

您似乎想检查特定网页的localStorage，无论它是否打开。这样做似乎是一种处理事情的笨拙方式，但如果这是你想尝试的..

从popup.html 的上下文中执行它是行不通的：它有自己的localStorage。

要访问网页的本地存储，您需要将内容脚本注入页面。 如果它没有在选项卡中打开，您可以在后台页面中将页面加载到iframe，它可能可以工作。

请注意，您需要获得应用网页的主机权限。