1

I've looked at a few questions and it seems this is a common problem for extensions that open pages with iframes. A solution i've seen is to add a spinner gif and have it hide automatically after a few seconds using a for loop. I tried to do that and i couldnt get it to work. The gif only appears when the iframe has loaded (4+ seconds after i clicked the extension icon)

HTML:

<!--
<!doctype html>
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Google</title>
    <style>
html, body {
margin:0;
padding:0;
}
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
    background-color: white;
    overflow-y:hidden;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    p{
            visibility:visible;
    }


    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="status">
<img src="spinner.gif"/>
<iframe src="https://www.google.com/" width="398" height="100%" frameborder="0"></iframe> 

</body>
</html>

js:

for (var i = 1; i == 10; i++) {
document.getElementById(img).style.visibility = "hidden";
}

Manifest file:

  {
"manifest_version": 2,
"name": "Open google",
"version": "1",
    "browser_action": {

      "default_icon": { 
        "19": "icon.png",
        "38": "icon.png"
      },
      "default_title": "Webpage opener",
      "default_popup": "popup.html"
    }
  }

If i've broken any rules by asking this question, please comment below and i'll correct my question.

user6333114
  • 51
  • 1
  • 2
  • 11

1 Answers1

1

First, I don't know since when, but we cannot display Google.com in an iframe. (How to show google.com in an iframe?)

Say you want to open Bing instead.

As a rational thinking, the answer is like this.

You might have the popup.html as follow:

<html>
<head>
  <title>Google</title>
</head>
<body>
  <img style="display: block" src="spinner.gif" />
  <iframe style="display: none" src="http://www.bing.com/" width="" height="100%" frameborder="0"></iframe>
  <script src="jquery.js"></script>
  <script src="popup.js"></script>
</body>
</html>

It is simple. First, we show the spinner, and hide the iframe. Then to achieve what you expected, the script might look like

$('iframe').load(function () {
    $('iframe').css('display', 'block');
    $('img').css('display', 'none');
});

For some lightning-speed pages like Google.com or Bing.com, you probably don't see the spinner.

But in fact

Google Chrome is so smart that is will wait until the iframe (or all the iframes) is loaded, then it show the popup.

So, a spinner is not needed.

Community
  • 1
  • 1
vothaison
  • 1,646
  • 15
  • 15