document.body 返回 iframe 正文答案

【问题标题】：document.body returning iframe bodydocument.body 返回 iframe 正文
【发布时间】：2016-09-09 18:39:54
【问题描述】：

我正在开发一个将 html 注入 Linkedin 的 chrome 扩展程序。当我从我的 Js 文件中执行 $(document.body).append($("<div>")); 时，它还会附加页面上的 Iframe 组件。但是，当我在控制台上键入 $(document.body) 时，它只返回主体。如何将其限制为我的 js 文件中的主体。？

我的清单文件：

{
    "manifest_version":2,
    "name": "Hawk! Beta",
    "description": "Hawk",
    "version": "1.0",
    "permissions": [
        "activeTab",
        "tabs",
        "storage",
        "https://ajax.googleapis.com/",
        "https://*.ngrok.io/"
    ],
    "icons": { 
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png" 
    },
    "browser_action": {
        "default_icon": {                    
            "19": "img/icon.png",          
            "38": "img/icon.png"          
        }
    },
    "background": {
        "scripts": [
            "js/lib/jquery.min.js", 
            "js/lib/asteroid/ddp.js",
            "js/lib/asteroid/q/q.js",
            "js/lib/asteroid/asteroid/dist/asteroid.chrome.js",
            "js/lib/asteroid/asteroid/dist/plugins/facebook-login.js",
            "js/lib/asteroid/asteroid/dist/plugins/google-login.js",
            "js/lib/asteroid/asteroid/dist/plugins/github-login.js",
            "js/lib/bootstrap.min.js",
            "js/background.js"
        ]
    },
    "content_scripts": [
        {
          "matches": [
             "https://www.linkedin.com/*"
          ],
          "all_frames" : true,
          "match_about_blank": true,
          "js": [
            "js/lib/jquery.min.js", 
            "js/lib/handlebars.js",
            "js/content_scripts/getPagesSource.js"
          ],
          "css":[
            "css/custom.css"
          ]
        }
    ],
    "web_accessible_resources": [
        "img/*",
        "js/*",
        "js/lib/*",
        "css/custom.css",
        "html/*"
    ]
}

我用来注入html的代码

function injectHtml(){
    console.log(document.body); //this returns 2 bodies
    $(document.body).append($("<div>", {
        "class": "myapp-container"
    }));
}

我只想注入主体而不是 iframe 主体。

【问题讨论】：

你需要选择 iframe 而不是内容。
听起来您的脚本正被注入 iframe 以及顶级页面。您的清单设置是什么，您是否限制了可以注入的位置？
请edit 您的问题包括您的 manifest.json 文件和/或您用于将内容脚本注入页面的任何代码。需要此信息来回答您的问题。如果没有这些信息，您就没有提供调试问题所需的minimal reproducible example。 minimal reproducible example 的意义在于我们可以复制问题（即，我们有足够的信息不必猜测问题/解决方案是什么）。当您添加 manifest.json 以及如何注入内容脚本时，请给我留言（在评论中包括 @Makyen）。
@Makyen ，我现在添加了评论。请帮忙。
@ShrihariIyer，感谢您就您问题的更新向我发送电子邮件。拥有 manifest.json 文件使其成为一个可以回答的问题（正如您所意识到的，所需的更改在该文件中）。我已经撤回了我的赞成票并推翻了我的反对票。很高兴看到您解决了问题。

标签： javascript jquery html google-chrome-extension

【解决方案1】：

根据 Patrick 和 wOxxOm 的建议，我将清单文件的 content_scripts 编辑为如下所示。

"content_scripts": [
    {
      "matches": [
         "https://www.linkedin.com/*"
      ],
      "all_frames" : false, //this had to be changed 
      "match_about_blank": true,
      "js": [
        "js/lib/jquery.min.js", 
        "js/lib/handlebars.js",
        "js/content_scripts/getPagesSource.js"
      ],
      "css":[
        "css/custom.css"
      ]
    }
]

现在可以正常工作了。谢谢各位。

编辑：所有帧：

控制内容脚本是否在匹配的所有帧中运行页面，或仅顶部框架。

更多我们有， this link to know more

【讨论】：

添加一些解释，说明为什么此更改会导致它起作用，这将是一个更好的答案。除了解释之外，我还建议链接到"content_scripts":"all_frames"。