title: Get value from localStorage to use in popup.html
body: <p>I'm creating my first chrome extension and have gotten to a stage I can't seem to figure out.</p>
  
  <p>Basically I can get my option to save, but I don't know how to retrieve the value to use it in popup.html</p>
  
  <p>Here's my code:</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
  "manifest_version": 2,
  "name": "My Extension",
  "options_page": "options.html",
  
  "permissions": [
        "storage"
      ],
  
  "description": "My Extension",
  "version": "1.0",
  "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
     }
  }
  </code></pre>
  
  <p><strong>options.js</strong></p>
  
  <pre><code>// Save options to localStorage.
  function save_options()
  {
    localStorage["url"] = document.getElementById("url").value;
  
    // Let the user know the options were saved.
    var status = document.getElementById("status");
    status.innerHTML = "Saved OK";
    setTimeout( function() { status.innerHTML = ""; }, 5000 );
  }
  
  // Populate options from from localStorage.
  function load_options()
  {
    var url = localStorage["url"];
    if (url == null) { url = ""; }
    document.getElementById("url").value = url;
  }
  
  // call load_options top populate the GUI when the DOM has loaded
  document.addEventListener('DOMContentLoaded', load_options);
  
  // call save_options when the user clicks the save button
  document.getElementById("save").addEventListener('click', save_options);
  </code></pre>
  
  <p><strong>options.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;head&gt;&lt;title&gt;My Options&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
  
          &lt;label for="url"&gt;
              &lt;p&gt;My URL&lt;/p&gt;
              &lt;input type="text" id="url" /&gt;
              &lt;button id="save"&gt;Save&lt;/button&gt;
          &lt;/label&gt;
  
      &lt;/div&gt;
  
      &lt;div id="status"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;script src="options.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;iframe src="myURL" id="myURL" name="myURL" width="200" height="200"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works fine, and in options you can save anything you put into the url field. Now I want to get that saved value and make it be the src (myURL) for the iframe in popup.html</p>
  
  <p>Example: So in options if you entered and saved <a href="http://www.google.com" rel="nofollow">http://www.google.com</a> then in the popup.html the iframe would be:</p>
  
  <pre><code>&lt;iframe src="http://www.google.com" id="myURL" name="myURL" width="200" height="200"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Any help is appreciated.</p>