What is the correct way to access the DOM of the current page from the Chrome extension?

Question

Google Chrome

Tell me how to properly access the DOM of the currently open Chrome tab from the Chrome extension.
There is code in popup.html:

chrome.tabs.executeScript(null, {
            code: "var blocks = document.querySelectorAll('.text-card_content');"
});

But in this case it is very inconvenient to "debug the code" because it is used as a string value.
Actually the question is:
Am I referring to the DOM of the current tab correctly? Is there any "more convenient" way, for example something like this:
chrome.tabs.query(...   и.т.д.

Answer 1

I would like to raise the issue, there was a task that does not require communication using messages between content, background, popup scripts. It is necessary, trivial to add links to the page.
I statically write search and replace in the content script, it works only for those that are on the page, but the page has dynamic content that changes the location but does not update the page, because my extension starts after document_end, there is no dynamic content yet until the button is pressed:
div id="zapros-s-sql"
.
Tried adding an addEventListener to the button that triggers the dynamic request, but it doesn't fire. DOMtrimanipulation, also the handler does not work. Just found a solution to the 'click' listener - it works, but needs to be automated.
Actually the question is whether there are any manifest handlers that automatically reload the extension when the dynamics were called or at least the location was changed. I hope it is clear, I apologize in advance for the uneven handwriting.