title: Get document.body of webpage from popup while using Chrome extension
body: <p>I have a basic Chrome extension which needs to access <code>document.body</code> of the webpage through popup.</p>
  
  <p>Currently, when I try to open popup &amp; console log <code>document.body</code>, it logs the popup's <code>document.body</code> while I want the website's <code>document.body</code>.</p>
  
  <p>How do I do that?</p>
  
  <h1>manifest.json</h1>
  
  <pre><code>{
    "description": "Demo ext",
    "manifest_version": 2,
    "name": "Demo ext",
    "version": "1.0",
    "icons": {
      "48": "icons/icon-48.png"
    },
    "permissions": ["activeTab"],
    "browser_action": {
      "default_icon": "icons/icon-32.png",
      "theme_icons": [
        {
          "light": "icons/icon-32-light.png",
          "dark": "icons/icon-32.png",
          "size": 32
        }
      ],
      "default_title": "Demo ext",
      "default_popup": "popup/index.html"
    }
  }
  </code></pre>
  
  <h1>popup/index.html</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Demo ext&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Title should be the websites which we are on &lt;/h1&gt;
      &lt;script src="./app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>popup/app.js</h1>
  
  <pre><code>function main() {
    console.log(document.body)
    var title = document.createElement('div')
    title.innerHTML = document.title
    document.body.appendChild(title)
  }
  
  main()
  </code></pre>
  
  <p>I want the <code>document.body</code> logged here to be of the website. How should I do it?</p>