Where do I need to add `if(chrome.runtime.id == undefined) return;` for Uncaught Error: Extension context invalidated

Question

This post is connected to my previous post. I am creating a Chrome extension. I want to insert text into the Gmail reply field - based on a click. I use MutationObserver for getting the changes and not only the initial HTML. Since I implemented MutationObserver I get the error:

content.js:63 Uncaught Error: Extension context invalidated. at HTMLDocument.<anonymous> (content.js:63:20)

Like its stated here. I tried to insert if (chrome.runtime.id == undefined) return; for avoiding the error. But it's not working. Where do I need to add the insert if (chrome.runtime.id == undefined) return;?

content.js

document.addEventListener("click", (event) => {
  if (event.target.innerText == "Reply") {
    const element = document.querySelector(".a3s.aiL");
    const textContent = element.textContent;
    const allElements = document.querySelectorAll("*");
    const observer = new MutationObserver((mutations) => {
      const insertField = allElements.forEach((element) => {
        if (element.classList.contains("aO7")) {
          console.log("found it");
        }
      });
    });

    observer.observe(document.body, {
      attributes: true,
      childList: true,
      subtree: true,
    });

    chrome.runtime.sendMessage({
      type: "click_event",
    });
  }
});

background.js

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