0

I am creating a chrome extension where on click of the reply button for an email inside of Gmail some text gets pasted inside of the email reply field. I work with an event listener who seems to receive only the initial HTML from the moment on where the reply button gets clicked. I cannot access the reply field which opens up after the reply button gets clicked to insert my email text because if I try to select the div with the class of the div I get an empty object. How can I get the updated HTML and not the initial HTML?

I've tried to use timeouts to wait till the site refreshes and different query selectors.

background.js

console.log("background.js loaded");
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log("message received in background.js");
  if (request.type == "click_event") {
    console.log("click event captured in current webpage");
  }
});

content.js (here the problem occurs)

document.addEventListener("click", (event) => {
  if (event.target.innerText == "Reply") {
    console.log("reply clicked");
    //text from previous email
    const element = document.querySelector(".a3s.aiL");
    const textContent = element.textContent;
    console.log(textContent);
    //trying to get the email input field but I get only an empty object back
    const insertField = document.querySelectorAll(".a07");
    chrome.runtime.sendMessage({
      type: "click_event",
    });
  }
});
Bozhinovski
  • 2,496
  • 3
  • 20
  • 38
Max Hager
  • 536
  • 4
  • 13
  • 1
    Use MutationObserver in the click listener to wait for the actual contents to appear. – wOxxOm Dec 12 '22 at 09:51
  • As I understand MutationObserver you need a tag which you have to observe. Should I just take one which appears in the DOM in the current DOM? Tried it out but got some error. @wOxxOm – Max Hager Dec 12 '22 at 10:18
  • You can observe the parent/ancestor element of the one you want to wait for. – wOxxOm Dec 12 '22 at 10:30
  • I implemented the observer who observes the whole DOM and now get `Uncaught Error: Extension context invalidated.`. @wOxxOm – Max Hager Dec 12 '22 at 10:37
  • It's a different problem caused by reloading of the extension, see [Chrome extension: How to remove orphaned script after chrom extension update](https://stackoverflow.com/a/57471345) – wOxxOm Dec 12 '22 at 13:07
  • Hmm, thanks. I added `if (chrome.runtime.id == undefined) return;` to the top of my `content.js` but it's still not working. @wOxxOm – Max Hager Dec 12 '22 at 16:00
  • It shouldn't be at the top of the script. The answer I've linked shows how to do it correctly. – wOxxOm Dec 12 '22 at 16:19
  • It's unclear to me. I Created a new post [here](https://stackoverflow.com/questions/74776417/where-do-i-need-to-add-ifchrome-runtime-id-undefined-return-for-uncaught). @wOxxOm – Max Hager Dec 12 '22 at 19:36

1 Answers1

-1
 const element = document.querySelector(".a3s"); 
 const element1 = document.querySelector(".aiL");
 console.log(element);
 console.log(element1);

query selector only returns one matched query.

Red-Dot
  • 57
  • 8
  • Yes. But this is not the problem because I do not get any object. The problem is here `const insertField = document.querySelectorAll(".a07");`. If I query for any tag with the class `.a07` than I can an empty NodeList because I have only the initial HTML available. – Max Hager Dec 12 '22 at 08:45
  • Please check if you have the field in your DOM or not. – Red-Dot Dec 12 '22 at 08:49