Chrome Extension - DOM undefined After a form submit

Question

The extension is unable to load the page's DOM after the submit action.

Before submitting it works. After the submit does not work.

Cannot read property 'body' of undefined

Thank you

manisfest

{
    "name": "Nfe",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Nfe"
    },
    "background":{
        "scripts": ["background.js"]
    },
    "permissions": ["tabs"]
}

popup.html

document.querySelector('button').addEventListener('click', onclick, false)
function onclick () {
    chrome.tabs.query({url:"http://site"}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {data:"OK"});
      });
}

content.js

// Test load DOM 
    const interval = setInterval(()=>{
    const conteud =  document.querySelector("body")
    console.log(conteud)

    }, 1000)

    chrome.runtime.onMessage.addListener(
        function(request, sender, sendResponse) {
                const conteudo =  window.document.querySelector("body")
                var html = conteudo.outerHTML; 
                var data = { html: html }; 
                console.log(data)
        })

page before submit. it works

page after submit. Body capture does not work here

I'm trying to use it on a web page. Because the submit is on this page and I intend to capture the body of this page after the submit. — marcelo.delta, Jul 08 '20 at 12:55
The submit page I have no control over. Because I'm trying to capture data from it. She tells a simple form. This is all the code I have. how can i provide more information? Thanks for listening. — marcelo.delta, Jul 08 '20 at 14:42
I simply go to the site where I want the data. I fill out the form. I execute the submit and soon after I try to capture the data from the current page with the chrome extension. — marcelo.delta, Jul 08 '20 at 14:45
I want to capture the page's DOM after sending the submit. When the submit is done. The page is loaded with data at the same url address. And it is this DOM data that I need to capture. However, the DOM is not loaded into content.js after submitting — marcelo.delta, Jul 08 '20 at 17:21

score 0 · Accepted Answer · answered Jul 08 '20 at 22:42

Resolved with

function interceptData() {
    var xhrOverrideScript = document.createElement('script');
    xhrOverrideScript.type = 'text/javascript';
    xhrOverrideScript.innerHTML = `
    (function() {
      var XHR = XMLHttpRequest.prototype;
      var send = XHR.send;
      var open = XHR.open;
      XHR.open = function(method, url) {
          this.url = url; // the request url
          return open.apply(this, arguments);
      }
      XHR.send = function() {
          this.addEventListener('load', function() {
              if (this.url.includes('<url-you-want-to-intercept>')) {
                  var dataDOMElement = document.createElement('div');
                  dataDOMElement.id = '__interceptedData';
                  dataDOMElement.innerText = this.response;
                  dataDOMElement.style.height = 0;
                  dataDOMElement.style.overflow = 'hidden';
                  document.body.appendChild(dataDOMElement);
              }               
          });
          return send.apply(this, arguments);
      };
    })();
    `
    document.head.prepend(xhrOverrideScript);
  }

Chrome Extension - DOM undefined After a form submit

1 Answers1