Get document.body of webpage from popup while using Chrome extension

Question

I have a basic Chrome extension which needs to access document.body of the webpage through popup.

Currently, when I try to open popup & console log document.body, it logs the popup's document.body while I want the website's document.body.

How do I do that?

manifest.json

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

popup/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo ext</title>
  </head>
  <body>
    <h1>Title should be the websites which we are on </h1>
    <script src="./app.js"></script>
  </body>
</html>

popup/app.js

function main() {
  console.log(document.body)
  var title = document.createElement('div')
  title.innerHTML = document.title
  document.body.appendChild(title)
}

main()

I want the document.body logged here to be of the website. How should I do it?

Possible duplicate of [How to access the webpage DOM rather than the extension page DOM?](https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom) — wOxxOm, Jun 09 '19 at 16:12
yep it looks like a possible duplicate but the executeScript method felt hackish. so i went with [this answer](https://stackoverflow.com/a/20023723/6141587) & it helped me solve it :) — deadcoder0904, Jun 13 '19 at 05:58
by hackish i meant weird syntax. i had to convert that javascript into strings. i think it can also be provided a js filepath but the other way is much nicer so i used that. — deadcoder0904, Jun 13 '19 at 07:35
Depending on the actual/final goal that other approach may be way too over-engineered. — wOxxOm, Jun 13 '19 at 10:09

score 2 · Answer 1 · answered Jun 09 '19 at 15:08

I suggest that you review this Chrome Extension Content Scripts

If your extension needs to interact with web pages, then it needs a content script. A content script is some JavaScript that executes in the context of a page that's been loaded into the browser. Think of a content script as part of that loaded page, not as part of the extension it was packaged with (its parent extension).

Content scripts can access Chrome APIs used by their parent extension by exchanging messages with the extension. They can also access the URL of an extension's file with chrome.runtime.getURL() and use the result the same as other URLs.

thank you. I found the solution in [this answer](https://stackoverflow.com/a/20023723/6141587) :) — deadcoder0904, Jun 13 '19 at 05:56

score 1 · Accepted Answer · answered Jun 13 '19 at 05:56

1

Indeed Content scripts were the way to go. I tried it but it didn't work for me but this answer solved it all.

Just linking it since it explains everything better than I can :)

answered Jun 13 '19 at 05:56

deadcoder0904

3,758
1
27
91

Get document.body of webpage from popup while using Chrome extension

manifest.json

popup/index.html

popup/app.js

2 Answers2