iframe in chrome extension background page is always getting cancelled

Question

I am not able to load an iframe on the background page of a chrome extension.

I've tried loading iframe separately on html page and its working so, I think this issue has something to do with chrome extension or browser property

for example, if I add this in my chrome extension background page

<iframe id="stackoverflow" src="https://www.stackoverflow.com"></iframe>

I am always getting canceled status

WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

manifest.json:

{
  "name": "__MSG_appName__",
  "short_name": "ixigo",
  "version": "3.1.24",
  "manifest_version": 2,
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "images/16.png",
    "48": "images/48.png",
    "128": "images/128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/libs/jquery.min.js",
      "scripts/src/config.js",
      "scripts/src/track.js",
      "scripts/src/userIntentHandler.js",
      "scripts/src/background.js",
      "scripts/src/OneSignal.js",
      "scripts/src/notificationsHandler.js"
    ],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "all_frames": true
    },
    {
      "matches": [
        "*://www.irctc.co.in/*",
        "*://*.ixigo.com/*"
      ],
      "js": [
        "scripts/src/irctcAutofill.js",
        "scripts/src/irctcAutofillEventHandler.js"
      ],
      "all_frames": false
    },
    {
      "matches": [
        "*://*.indianrail.gov.in/*",
        "*://*.ixigo.com/*"
      ],
      "js": [
        "scripts/libs/jquery.min.js",
        "scripts/src/train.js",
        "scripts/src/trainAvailability.js",
        "scripts/src/runningStatus.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "chrome_url_overrides": {
    "newtab": "ixitab.html"
  },
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": [
    "tabs",
    "http://*.indianrail.gov.in/*",
    "*://*.ixigo.com/*",
    "cookies",
    "notifications",
    "gcm",
    "storage"
  ],
  "web_accessible_resources": [
    "images/*",
    "fonts/*",
    "styles/*"
  ],
  "update_url": "http://clients2.google.com/service/update2/crx",
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://api.bing.com/osjson.aspx object-src 'self'"
}

Answer 1

So it appears that Chrome "cancels" the loading of an iframe in a background page, presumably for security reasons. BUT it still processes correctly and can send and receive messages as you'd expect. I have a demo set up here that loads up an iframe in the background page, sends a message to it, and the iframe echos the message back.

Since the request is showing canceled, a third party library I'm using that happens to load up an iframe to try and get a new token, is failing and I'll need to reconfigure it to still hook in to the messaging even though it thinks that it didn't load properly.

You've never been able to access the DOM / window of an iframe directly through the background page, all events have to go through messages as a security precaution.

In addition, and perhaps more importantly to your actual issue, the error in connecting you are getting is to "localhost:35729/livereload", that address isn't defined in your manifest.json permission section and is likely being aborted by chrome due to that.

The code for posterity:

background.js

window.onload = function(){
    var frame = document.createElement('iframe');
    frame.src = 'https://crustyjew.github.io/ChromeExtensionBug/';
    document.body.appendChild(frame);

    window.addEventListener('message',function(e){
      console.log("message received: " + JSON.stringify(e.data));
    });
    console.log('posting message to iframe');
    
    frame.addEventListener('load',function(){
        frame.contentWindow.postMessage("TestMessage","*");
    });
};

manifest.json

{
    "name": "BackgroundIframeBug",
    "short_name": "BGIframeBug",
    "version": "1.0.0",
    "manifest_version": 2,
    "background":{
        "scripts":["background.js"]
    },
    "permissions":[
        "<all_urls>"
    ]
}

echo page to load in iframe

index.js =>

window.onload=function(){
  function receiveMessage(e){
    console.log('received message');
    var origin = event.origin || event.originalEvent.origin; 
    e.source.postMessage({'origin':origin,'message':e.data},"*");
  }
window.addEventListener('message',receiveMessage);}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <script src="index.js"></script>
  </body>
</html>