Question

我正在开发一个chrome扩展程序，我想在弹出窗口中（当用户单击扩展程序图标时）显示一个url为localhost的页面，在此页面中，我将检查是否用户已登录我的网站，并根据状态，我将在页面中显示内容。
所以我尝试了这些：

第一：

创建一个popup.html（不包含iframe）

popup.js

创建一个iframe并为其指定一个src，width，height。而不是将其附加到身体上。

第二：

在popup.html中，将iframe添加为localhost的src。
创建一个iframe并为其指定src，宽度，高度。而不是将其附加到身体上。

第一个和第二个都不起作用。我得到这个：

但是当我在src中使用普通网站时，就像http://bing.com一样，它可以正常工作并显示bing.com的页面

Answer 1

这是我开发的MVCE示例：

HTML文件为：

index.html是通过Web服务器提供的文件

<html>
 <body>
  <h1>Hello World!</h1>
 </body>
</html>

popup.html是扩展名弹出内容

<html>
 <body>
  <div id="container">
  </div>
  <script src="content.js"></script>
 </body>
</html>

带有扩展名的清单：

manifest.json

{
  "manifest_version": 2,
  "name": "Test Popup",
  "version": "0.1",
  "browser_action": {
    "default_title": "Popup Test",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs", "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://*/*"
      ],
      "js": [
        "content.js"
      ]
    }
  ]
}

您需要的是一个用于包含外部文件的服务器，我用过ruby：

serve.rb

require 'webrick'
s = WEBrick::HTTPServer.new(:Port => 8888, :DocumentRoot => Dir.pwd).start

所有神奇的事情都发生在内容javascript中：

content.js

function addiframe() {
  div = document.getElementById("container");
    var frame = document.createElement('iframe');

    frame.setAttribute('width', '500px');
    frame.setAttribute('height', '500px');
    frame.setAttribute('frameborder', '0');
    frame.setAttribute('id', 'inject');
  frame.setAttribute('src', 'http://localhost:8888');

    div.appendChild(frame);
};

addiframe();

这是显示结果的图像：

不能将localhost用作iframe的src

1 个答案: