title: Access webpage's localStorage from a Chrome extension?
body: <p>I have a webpage and a Chrome extension built for that webpage.</p>
  
  <p>Once the user successfully login into my website. 
  I trigger this:</p>
  
  <pre><code> localStorage.app_isLoggedIn = true;
   localStorage.app_loggedInTimeStamp = new Date();
  </code></pre>
  
  <p><hr>
  (I verify this : saves successfully)</p>
  
  <hr>
  
  <p><strong>Chrome Extension Details</strong></p>
  
  <p><strong>manifest file:</strong></p>
  
  <pre><code>{
  
  "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"
  ]
  
  
  }
  </code></pre>
  
  <p>============</p>
  
  <p><strong>authenticate.js</strong> - this is the first script file on my page(popup.html)</p>
  
  <pre><code>// 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 &amp;&amp; st != "undefined" &amp;&amp; st != null &amp;&amp; st != 'null' &amp;&amp; timeStamp != undefined &amp;&amp; timeStamp != "undefined" &amp;&amp; timeStamp != null &amp;&amp; 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 &gt; 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" });
  }
  </code></pre>
  
  <p>After this, I click on my Chrome extension. </p>
  
  <p><strong>The behavior I want</strong></p>
  
  <p>The Chrome plugin should check the HTML 5 local storage variables that I saved when I logged into my application.</p>
  
  <p>If the user is not logged in to my app: then the user should be redirected to my web application.</p>
  
  <p>If the user is logged in to my app: the plugin should pop out and the plugin would now show my app data.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>The Chrome extension is not able to access the local storage that was set by my application.
  (the above console messages output)</p>
  
  <pre><code>statusundefined ---- timestamp undefined 
  </code></pre>
  
  <p>When I check the local storage of the plugin popup window, I get this in my chrome dev tools.</p>
  
  <pre><code>localStorage
  Storage {length: 0}
  </code></pre>
  
  <p>Please See: I don't think this link is my use case
  <a href="https://stackoverflow.com/questions/3937000/chrome-extension-accessing-localstorage-in-content-script?rq=1">Chrome extension: accessing local storage in content script</a></p>