document.body returning iframe body

Question

I am developing a chrome extension that injects html to Linkedin. When I do $(document.body).append($("<div>")); from my Js file, it also appends for an Iframe component that's on the page.How ever when I type $(document.body) on the console it only returns main body. How do I restrict it to only main body from my js file.?

My manifest file:

{
    "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/*"
    ]
}

The code I used to inject html

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

I only want to inject into main body and not into iframe body.

Answer 1

As suggested by Patrick and wOxxOm , I edited the manifest file's content_scripts to look like below.

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

It now works fine. Thanks guys.

Edit: all_frames:

Controls whether the content script runs in all frames of the matching page, or only the top frame.

For more we have, this link to know more