Accessing Current Tab DOM Object From A Chrome Extension

I have been searching around on how to accomplish this. I have found some articles most notably Accessing Current Tab DOM Object from 'popup.html'? However I am very new to JavaScr

Solution 1:

I see this is an older question, but it's unanswered and I ran into the same issue. Maybe it's a security feature, but you don't seem to be able to return a DOM object. You can, however, return text. So for dom.js:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM")
   sendResponse({dom: document.body.innerHTML});
 else
   sendResponse({}); // Send nothing..
});

Solution 2:

I'm workin on an extension that transfers the html of the element as a text and then rebuilding the element back using innerHTML. Hope that clarifies how to get the DOM elements from the current page**

This is the way I've got the DOM:

Manifest.json

{
    "manifest_version": 2,
    "version" : "2.0",
    "name": "Prettify search",
    "description": "This extension shows a search result from the current page",
  "icons":{
    "128": "./img/icon128.png",
    "48": "./img/icon48.png",
    "16": "./img/icon16.png"
  },
 "page_action": {
    "default_icon": "./img/icon16.png",
    "default_popup": "popup.html",
    "default_title": "Prettify Results!"
  },

// If the context is the Mach url = sends a message to eventPage.js: active icon
  "content_scripts": [
    {
      "matches": ["http://www.whatever.cat/*"],
      "js": ["./js/content.js", "./js/jquery-3.1.1.min.js"]
    }
  ],

  "permissions": [
    "tabs",
    "http://www.whatever.cat/*",
    "http://loripsum.net/*"  //If you need to call and API here it goes
  ],

  "background":{
    "scripts": ["./js/eventPage.js"],
    "persistent": false
  }

}

Popup.js

    $(function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

            chrome.tabs.sendMessage(tabs[0].id, {action: "getPage"}, function(response) {

                var importedCode = response.searchResults;
                var fakeHtml = document.createElement( 'html' );
                fakeHtml.innerHTML = importedCode; // recieved String becomes html


          });
        });

Eventpage.js

>Able/disable the extension button 
chrome.runtime.onMessage.addListener(function(req, sender, resp) {
    if(req.todo === 'showPageAction'){

        chrome.tabs.query({active:true, currentWindow:true}, function(tabs) {
            chrome.pageAction.show(tabs[0].id);
        });
    }
});

content.js

Content_Scripts can not use the Chrome API to enable or disable the >extension icon. We pass a message to Event_Page, js, he can indeed use the Api

chrome.runtime.sendMessage({ todo: "showPageAction"});
window.onload = function() {

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.action == "getPage"){
        sendResponse({searchResults: document.body.innerHTML});
      }
  });  
};

popup.html

Just link popup.js