Chrome Extension - Get DOM content
The terms "background page", "popup", "content script" are still confusing you; I strongly suggest a more in-depth look at the Google Chrome Extensions Documentation.
Regarding your question if content scripts or background pages are the way to go:
Content scripts: Definitely
Content scripts are the only component of an extension that has access to the web-page's DOM.
Background page / Popup: Maybe (probably max. 1 of the two)
You may need to have the content script pass the DOM content to either a background page or the popup for further processing.
Let me repeat that I strongly recommend a more careful study of the available documentation!
That said, here is a sample extension that retrieves the DOM content on StackOverflow pages and sends it to the background page, which in turn prints it in the console:
background.js:
// Regex-pattern to check URLs against. // It matches URLs like: http[s]://[...]stackoverflow.com[...]var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?stackoverflow\.com/;// A function to use as callbackfunction doStuffWithDom(domContent) { console.log('I received the following DOM content:\n' + domContent);}// When the browser-action button is clicked...chrome.browserAction.onClicked.addListener(function (tab) { // ...check the URL of the active tab against our pattern and... if (urlRegex.test(tab.url)) { // ...if it matches, send a message specifying a callback too chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom); }});content.js:
// Listen for messageschrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { // If the received message has the expected format... if (msg.text === 'report_back') { // Call the specified callback, passing // the web-page's DOM content as argument sendResponse(document.all[0].outerHTML); }});manifest.json:
{ "manifest_version": 2, "name": "Test Extension", "version": "0.0", ... "background": { "persistent": false, "scripts": ["background.js"] }, "content_scripts": [{ "matches": ["*://*.stackoverflow.com/*"], "js": ["content.js"] }], "browser_action": { "default_title": "Test Extension" }, "permissions": ["activeTab"]}
You don't have to use the message passing to obtain or modify DOM. I used chrome.tabs.executeScriptinstead. In my example I am using only activeTab permission, therefore the script is executed only on the active tab.
part of manifest.json
"browser_action": { "default_title": "Test", "default_popup": "index.html"},"permissions": [ "activeTab", "<all_urls>"]index.html
<!DOCTYPE html><html> <head></head> <body> <button id="test">TEST!</button> <script src="test.js"></script> </body></html>test.js
document.getElementById("test").addEventListener('click', () => { console.log("Popup DOM fully loaded and parsed"); function modifyDOM() { //You can play with your DOM here or check URL against your regex console.log('Tab script:'); console.log(document.body); return document.body.innerHTML; } //We have permission to access the activeTab, so we can call chrome.tabs.executeScript: chrome.tabs.executeScript({ code: '(' + modifyDOM + ')();' //argument here is a string but function.toString() returns function's code }, (results) => { //Here we have just the innerHTML and not DOM structure console.log('Popup script:') console.log(results[0]); });});
For those who tried gkalpak answer and it did not work,
be aware that chrome will add the content script to a needed page only when your extension enabled during chrome launch and also a good idea restart browser after making these changes