Question

我正在开发一个chrome扩展，它将html注入到Linkedin。当我从我的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体内。

Answer 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"
      ]
    }
]

现在工作正常。谢谢你们。

编辑： all_frames：

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

我们有更多， this link to know more

document.body返回iframe体

1 个答案: