如何在 Chrome 扩展弹出窗口中嵌入网站

问题描述 投票：0回答：2

嗨，我正在尝试制作一个 Google chrome 扩展程序，该扩展程序将在浏览器上有一个按钮，单击该按钮时将打开一个带有此站点的气泡弹出窗口http://www.visualbounds.com/Private/XboxMB/Chatbox/ 。但我是新来的，当我尝试使用 iframe 时，弹出窗口中没有任何内容。

所以我想我是在问如何将网站嵌入到弹出窗口中？

如果有帮助的话，这是manifest.json。

{
  "browser_action": {
    "default_icon": "Images/16.png",
    "default_popup": "popup.html"
  },
   "background": {
      "persistent": false,
      "scripts": [ "background.js" ]
   },
   "content_scripts": [ {
      "js": [ "jquery.js", "script.js" ],
      "matches": [ "https://www.xboxmb.com/*" ],
      "run_at": "document_start"
   },{ "matches": ["http://*/*", "https://*/*" ],
      "all_frames": true,
      "js": ["content.js"]
    }
    ],
   "description": "Chat intergration for XboxMB",
   "icons": {
      "16": "Images/16.png",
      "48": "Images/48.png"
   },
   "manifest_version": 2,
   "name": "XboxMB Chatbox",
   "options_page": "options.html",
   "version": "2.2",
   "permissions": [
        "http://www.visualbounds.com/Private/XboxMB/Chatbox/mobile.html"
    ]
  }

这是 popup.html

<!doctype html>
<html>
<head>
    <style type="text/css">
    body {width:200; height:300;}
    </style>
</head>
<body>
    <iframe src="http://www.visualbounds.com/Private/XboxMB/Chatbox/mobile.html" width="100%" height="100%" frameborder="0">
    </iframe>
</body>
</html>

任何帮助将不胜感激。

亲切的问候

-肖恩

javascript html json google-chrome google-chrome-extension
2个回答
1
投票

首先你需要在manifest.json中指定默认的弹出目标

{
  "manifest_version": 2,

  "name": "xbox",
  "description": "xbox description",
  "version": "2.2",
  "browser_action": {
    "default_popup": "main.html"
   }
}

只需插入一个 iframe 元素

<iframe src="http://www.visualbounds.com/Private/XboxMB/Chatbox/mobile.html" width="320" height="480"></iframe>

您将在弹出窗口中看到嵌入的 iframe。

enter image description here

-1
投票

使用 iframe 嵌入像您在 Chrome 扩展弹出窗口中提到的网站可能具有挑战性，特别是如果该网站设置了 X-Frame-Options 或 Content-Security-Policy 标头以防止在 iframe 中加载。以下是解决此问题的方法：

检查 X-Frame-Options 或 Content-Security-Policy： 使用浏览器开发人员工具（F12 -> 网络选项卡）查看您要嵌入的网站是否具有 X-Frame-Options: SAMEORIGIN 等标头或阻止 iframe 的 Content-Security-Policy。如果存在这些，由于浏览器安全限制，您无法直接将网站嵌入 iframe 中。

解决方法选项：

在新选项卡中重定向：单击按钮时将用户重定向到新选项卡中，而不是嵌入网站。 代理服务器：设置代理服务器来获取网站内容并提供服务，而无需限制性标头。请注意，此方法需要服务器端开发并遵守网站的服务条款。 API 集成：如果网站提供 API，请将它们直接集成到您的扩展中以检索和显示必要的数据。 iFrame 的弹出窗口基础知识： 如果网站没有限制性标头，您可以在弹出窗口中使用 iframe。这是一个例子：

manifest.json:

json
Copy code
{
  "manifest_version": 3,
  "name": "Embed Popup Example",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}
popup.html:

html
Copy code
<!DOCTYPE html>
<html>
<head>
    <title>Popup</title>
    <style>
        iframe {
            width: 400px;
            height: 300px;
            border: none;
        }
    </style>
</head>
<body>
    <iframe src="http://www.visualbounds.com/Private/XboxMB/Chatbox/"></iframe>
</body>
</html>

要点：

确保 popup.html 在清单的 default_popup 字段中定义。 如果网站阻止 iframe 使用，则 iframe 将保持空白。 如果直接 iframe 方法由于限制而失败，您可能需要探索上述替代选项或寻找允许嵌入的类似网站。 我为我的网站PC Bottleneck Calculator实现了类似的方法，并且它运行得很好。通过使用 iframe 将网站嵌入到弹出窗口中，我能够毫无问题地实现所需的功能。事实证明，这种方法是有效的，前提是目标站点没有 X-Frame-Options 或 Content-Security-Policy 等阻止 iframe 使用的限制。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.