Access webpage's localStorage from a Chrome extension?

Question

I have a webpage and a Chrome extension built for that webpage.

Once the user successfully login into my website. I trigger this:

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

(I verify this : saves successfully)

Chrome Extension Details

manifest file:

{

"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 - this is the first script file on my page(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" });
}

After this, I click on my Chrome extension.

The behavior I want

The Chrome plugin should check the HTML 5 local storage variables that I saved when I logged into my application.

If the user is not logged in to my app: then the user should be redirected to my web application.

If the user is logged in to my app: the plugin should pop out and the plugin would now show my app data.

The Problem

The Chrome extension is not able to access the local storage that was set by my application. (the above console messages output)

statusundefined ---- timestamp undefined

When I check the local storage of the plugin popup window, I get this in my chrome dev tools.

localStorage
Storage {length: 0}

Please See: I don't think this link is my use case Chrome extension: accessing local storage in content script

Been a long time. And the module got discarded. But there should be better ways to do this now — ankur, Sep 30 '21 at 09:44

score 0 · Answer 1 · answered Apr 11 '14 at 11:04

0

~~I assume you are trying to access localStorage of a currently active tab.~~

It seems like you want to check localStorage of a particular webpage regardless of whether it's open or not. Doing so seems to be an unwieldy way to handle things, but if that's what you want to try..

Doing it from the context of popup.html will not work: it has its own localStorage.

To access the webpage's localStorage, you will need to inject a content script into the page. If it is not open in a tab, you can load the page in an iframe in your background page, it will probably work.

Note that you'll need host permissions for your app's webpage.

answered Apr 11 '14 at 11:04

Xan

74,770
16
179
206

This is probably not the best solution, better answers welcome. – Xan Apr 11 '14 at 11:09
ok its not quite clear to me. But the part "you can load the page in an iframe in your background page" - > will only lead to the background page getting stuck at the login page only . ( what I am doin in my website is session storage, i.e. tab based and would loose everything when the tab is closed... or even if a new tab is being opened)..... what I have done to assist my plugin is that I added the" localStorage.app_isLoggedIn = true; localStorage.app_loggedInTimeStamp = new Date();"to my web application so that chrome plugin can access it later.hope im clear – ankur Apr 11 '14 at 11:25

Access webpage's localStorage from a Chrome extension?

1 Answers1