title: How do I insert an iframe with dynamic HTTPS source from a Firefox extension?
body: <p>We develop browser extensions for Google Chrome, Firefox and Safari. We need to insert an iframe in Gmail (<a href="https://mail.google.com/" rel="nofollow">https://mail.google.com/</a>) in our Firefox extension. I created a JavaScript code that inserts the iframe to the page with jQuery. Here is the code:</p>
  
  <p>JavaScript code:</p>
  
  <pre><code>var $container = jQuery('&lt;div id="ws_login_overlay" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 9999999; background: rgba(64, 64, 64, 0.8);"&gt;&lt;/div&gt;');
  $container.append('&lt;iframe width="760" height="510" id="myframe" style="border: 1px solid grey; margin: 80px auto 0px auto; display: table; border-radius: 8px;" src="'+Utils.getUrl("content/login/login_iframe.html?url="+encodeURIComponent(WS.config.URLs.website.web_login+'#'+reply.ws_uid))+'"&gt;&lt;/iframe&gt;');
  jQuery("body").append($container);
  
  Utils.getUrl = function(filename, preferSecure) {
      return WS.getURL(filename, preferSecure);
  };
  
  /* Function to retrieve the relative URL/URI of a file in the platform's file system. */
  WS.getURL = function(filename, preferSecure) {
      if (typeof filename !== "string") {
          filename = "";
      } else if (filename.substr(0, 1) === "/") { /* Remove forward slash if it's the first character, so it matches with the base URLs of the APIs below. */
          filename = filename.substr(1);
      }
  
      switch (Sys.platform) {
          case 'mozilla':
              if (typeof exports === 'undefined') { // Means we're in a content script.
                  return self.options.extensionURL + filename;
              }
              return require("sdk/self").data.url("../lib/" + filename);
      }
  };
  </code></pre>
  
  <p>login_iframe.html:</p>
  
  <pre><code>&lt;style&gt;
  html, body, iframe {
      margin: 0;
      border: 0;
      padding: 0;
      display: block;
  }
  &lt;/style&gt;
  &lt;iframe width="760" height="510" id="iframe"&gt;&lt;/iframe&gt;
  &lt;script src="login_iframe.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>login_iframe.js:</p>
  
  <pre><code>// Get URL parameter.
  function GetURLParameter(sParam) {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&amp;');
      for (var i = 0; i &lt; sURLVariables.length; i++) {
          var sParameterName = sURLVariables[i].split('=');
          if ((sParameterName.length &gt;= 2) &amp;&amp; (sParameterName[0] === sParam)) {
              return decodeURIComponent(sParameterName[1]);
          }
      }
      return null;
  }
  
  document.getElementById("iframe").src = GetURLParameter("url");
  </code></pre>
  
  <p>I checked and <code>(typeof exports === 'undefined')</code> is true, but the problem is that the iframe is empty in Firefox, it's HTML is <code>&lt;iframe id="myframe" style="border: 1px solid grey; margin: 80px auto 0px auto; display: table; border-radius: 8px;" src="resource:[removed_link]" height="510" width="760"&gt;&lt;/iframe&gt;</code> and the src attribute is invalid. How do I fix the src attribute to show the correct iframe?</p>