Chrome扩展程序背景页面中的iframe始终被取消

Question

我无法在Chrome扩展程序的背景页面上加载iframe.

我已经尝试在html页面上分别加载iframe及其工作原理,我认为这个问题与chrome扩展或浏览器属性有关

例如,如果我在Chrome扩展程序背景页面中添加它

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

我总是被取消状态

与'ws:// localhost:35729/livereload'的WebSocket连接失败:连接建立错误: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

因此，Chrome 似乎“取消”了后台页面中 iframe 的加载，大概是出于安全原因。但它仍然可以正确处理并且可以按照您的预期发送和接收消息。我在这里设置了一个演示，它在后台页面加载一个 iframe，向其发送一条消息，然后 iframe 回显该消息。

由于请求显示已取消，我正在使用的第三方库碰巧加载 iframe 来尝试获取新令牌，失败了，我需要重新配置它以仍然连接到消息传递，即使它认为它没有正确加载。

您从来无法直接通过后台页面访问 iframe 的 DOM/窗口，所有事件都必须通过消息作为安全预防措施。

此外，也许对您的实际问题更重要的是，连接时出现的错误是“localhost:35729/livereload”，该地址未在您的manifest.json权限部分中定义，并且可能会被chrome中止，因为对此。

后代的代码：

背景.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","*");
    });
};

清单.json

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

echo 页面加载到 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>