title: Chrome Extension Saving Values from Background.js into Storage and displaying on popup.html
body: <p>I am currently writing a simple chrome extension that saves the current webpage to local storage when you click the extension icon in the header.</p>
  
  <p>I have successfully saved the url into local storage using background.js as per the Chrome Documentation here: <a href="https://developer.chrome.com/extensions/activeTab" rel="nofollow noreferrer">https://developer.chrome.com/extensions/activeTab</a>.</p>
  
  <p>My issue is that when I click the chrome extension icon the first time my event fires but my popup.js errors out with </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'getSelected' of undefined
  </code></pre>
  
  <p><strong>background.js</strong></p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab) {
  
    console.log('Turning ' + tab.url + ' red!');
    var tabNew = tab.url
    chrome.storage.sync.set({ ["key" + 1]:  tabNew}, function(){
        //  A data saved callback omg so fancy
    });
  
    chrome.storage.sync.get(/* String or Array */["key" + 1], function(items){
        //  items = [ { "yourBody": "myBody" } ]
        console.log(items)
    });
  
  
    chrome.tabs.executeScript({
      code: 'document.body.style.backgroundColor="red"'
    });
  
    chrome.browserAction.setPopup({popup: 'popup.html'});
  
  
  });
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>chrome.tabs.getSelected(null, function(tab) {
      document.getElementById('currentLink').innerHTML = tab.url;
  });
  
  
  
  document.addEventListener('DOMContentLoaded', function() {
      var link = document.getElementById('download');
      // onClick's logic below:
      link.addEventListener('click', function() {
          chrome.storage.sync.get(null, function(items) { // null implies all items
              // Convert object to a string.
              var result = JSON.stringify(items);
  
              // Save as file
              chrome.downloads.download({
                  url: 'data:application/json;base64,' + btoa(result),
                  filename: 'filename_of_exported_file.json'
              });
          });        
      });
  });
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt; 
  
      &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt; 
      &lt;link href='style.css' rel='stylesheet' type='text/css'&gt; 
  
      &lt;title&gt;Discoveroo&lt;/title&gt; 
  
      &lt;!-- &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;  --&gt;
      &lt;base target="_blank"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p id="currentLink"&gt;Loading ...&lt;/p&gt;
  &lt;hr /&gt;
  &lt;ul id="savedLinks"&gt;&lt;/ul&gt;
  &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
  
  &lt;button id="download"&gt;Download All&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
    "name": "APPNAME",
    "version": "0.1",
    "manifest_version": 2,
    "description": "APP DESC",
    "permissions": ["activeTab", "storage", "downloads", "&lt;all_urls&gt;"], 
    "background": {
      "scripts": ["background.js"],
      "persistent": true
    },
    "content_scripts": [{
      "matches": ["http://*/*", "https://*/*"],
      "js": ["popup.js"]
    }],
    "browser_action": {
      "default_title": "Add this page to my list"
    },
    "icons": {
      "128": "icon.png"
    }
  }
  </code></pre>