How to access the webpage DOM/HTML from an extension popup or background script?

ManifestV3 service worker doesn’t have any DOM/document/window.

ManifestV3/V2 extension pages (and the scripts inside) have their own DOM, document, window, and a chrome-extension:// URL (use devtools for that part of the extension to inspect it).

You need a content script to access DOM of web pages and interact with a tab’s contents. Content scripts will execute in the tab as a part of that page, not as a part of the extension, so don’t load your content script(s) in the extension page, use the following methods:

Method 1. Declarative

manifest.json:

"content_scripts": [{
  "matches": ["*://*.example.com/*"],
  "js": ["contentScript.js"]
}],

It will run once when the page loads. After that happens, use messaging but note, it can’t send DOM elements, Map, Set, ArrayBuffer, classes, functions, and so on – it can only send JSON-compatible simple objects and types so you’ll need to manually extract the required data and pass it as a simple array or object.

Method 2. Programmatic

• ManifestV2:

  Use chrome.tabs.executeScript in the extension script (like the popup or background) to inject a content script into a tab on demand.

  The callback of this method receives results of the last expression in the content script so it can be used to extract data which must be JSON-compatible, see method 1 note above.

  Required permissions in manifest.json:

  • Best case: "activeTab", suitable for a response to a user action (usually a click on the extension icon in the toolbar). Doesn’t show a permission warning when installing the extension.

  • Usual: "*://*.example.com/" plus any other sites you want.

  • Worst case: "<all_urls>" or "*://*/", "http://*/", "https://*/" – when submitting into Chrome Web Store all of these put your extension in a super slow review queue because of broad host permissions.

• ManifestV3 differences to the above:

  Use chrome.scripting.executeScript.

  Required permissions in manifest.json:

  • "scripting" – mandatory
  • "activeTab" – ideal scenario, see notes for ManifestV2 above.

  If ideal scenario is impossible add the allowed sites to host_permissions in manifest.json.