javascript - 我怎样才能在 chrome 扩展弹出窗口中嵌入网站

标签 javascript html json google-chrome google-chrome-extension

您好,我正在尝试制作一个在浏览器上有一个按钮的 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>

如有任何帮助,我们将不胜感激。

亲切的问候

-肖恩

最佳答案

首先你需要在 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

关于javascript - 我怎样才能在 chrome 扩展弹出窗口中嵌入网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19441044/

相关文章:

javascript - 如何在es6的react模板中使用if和else

javascript - 通过键值从 Javascript 中的嵌套数组对象中删除项目

javascript - 使用范围内的连续数字创建和填充数组的有效方法

css - 为什么鼠标悬停时菜单栏不显示?

html - 在 HTML 和 CSS 中只获取 border-bottom

javascript - 尝试导入错误: 'path-to-regexp' does not contain a default export (imported as 'pathToRegexp' )

javascript - HTML - 在其外部单击时边栏不关闭

java - JSON 数据错误地填充 textViews

jquery - 部分 View 与 Json(或两者)

json - 何时应在 REST API 响应中忽略 null 属性?