title: Chrome extension Options Page
body: <p>I've been working on a simple Chrome Extension/Userscript and I have it working completely fine. However, I decided to attempt adding an options page to select a desired option. However, I cannot get it to work...</p>
  
  <p>Here is my options.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Extension Options&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;select id="changeEmotes"&gt;
   &lt;option value="twitch"&gt;Twitch&lt;/option&gt;
   &lt;option value="custom"&gt;Only Custom&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;button id="saveData"&gt;Save&lt;/button&gt;
  
  &lt;script src="options.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My options.js: </p>
  
  <pre><code>function saveData()
  {   
  var test = document.getElementById('changeEmotes').value;
  chrome.storage.local.set({
      emoteSetting: test
  }, function() {
      // Update status to let user know options were saved.
      var status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(function() {
      status.textContent = '';
      }, 750);
  });
  
  var emoteSetting = "";
  chrome.storage.local.get("emoteSetting", function(result) {
      emoteSetting = result.emoteSetting;
      alert(result.emoteSetting);
  });
  
  }
  
  document.getElementById('saveData').addEventListener('click', saveData);
  </code></pre>
  
  <p>and finally, my script.js:</p>
  
  <pre><code>// ==UserScript==
  // @name Hitbox Emotes
  // @namespace Hitbox Emotes
  // @description Allows the use of Twitch emotes on Hitbox.
  // @include *.hitbox.tv/*
  // @include *.speedrun.tv/*
  // @include *.twitch.tv/*
  // @icon http://i.imgur.com/fa1Kkku.png
  // @version 1.1.8
  // @updateURL https://gist.githubusercontent.com/GamingTom/11141717/raw/465792.user.js
  // @downloadURL https://gist.githubusercontent.com/GamingTom/11141717/raw/465792.user.js
  // ==/UserScript==
  
  function hitbox_twitch()
  {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = "https://gist.githubusercontent.com/GamingTom/11142192/raw/emotes.js";
      var head = document.getElementsByTagName('head')[0];
      if(head) head.appendChild(script);
  }
  
  function hitbox_custom()
  {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "www.test.com";
  var head = document.getElementsByTagName('head')[0];
  if(head) head.appendChild(script);
  }
  
  function update()
  {
      var emoteSetting = "";
  chrome.storage.local.get("emoteSetting", function(result) {
      emoteSetting = result.emoteSetting;
      console.log(result.emoteSetting);
              alert(result.emoteSetting);
  });
  
  }
  
  update();
  </code></pre>
  
  <p>My script.js usually runs on site load if I do something like "hitbox_twitch();" at the end instead of "update();" and when I do click the save button on the options.html it does alert the correct variable for what I am looking for. However, the alert box does not appear when the site loads and I get "Uncaught TypeError: Cannot read property 'sync' of undefined" posted in the console. So in summary, the code works in the options.html but not in the script.js.</p>
  
  <p>If anyone has any ideas, it would be greatly appreciated, and if you need any more information, please just ask. Many thanks.</p>
  
  <p>-Tom</p>
  
  <p>EDIT:
  My manifest file:</p>
  
  <pre><code>{
     "content_scripts": [ {
        "js": [ "contentscript.js" ],
        "matches": [ "*://*.hitbox.tv/*" ]
     } ],
     "description": "Allows the use of Twitch emotes on Hitbox.",
     "options_page": "options.html",
     "icons": {
        "128": "icon128.png"
     },
     "manifest_version": 2,
     "name": "Hitbox Emotes",
     "update_url": "https://clients2.google.com/service/update2/crx",
     "version": "1.1.8",
     "web_accessible_resources": [ "script.js" ],
     "permissions": ["storage"]
  }
  </code></pre>