How to organize scripts for an extension?

Question

JavaScript

Good afternoon!
I am writing an extension for chrome, it should work only on one site and throw out a message with a certain frequency. In order to work only on one site, I wrote in manifest.json:

"browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
},
"content_scripts": [{
        "js": ["content.js"],
        "matches": ["https://websitename.com/*"]
  }]

That is, I load the script on only one site.
The problem is that in the script I'm trying to get both the elements from the site it's used on (websitename.com) and the elements from my extension window (i.e. popup.html) so that the user can set the time himself timer. But in this way I get access only to the site elements (because the script is not attached to my popup.html).
I tried to bind the script to the popup.html file, but in this case I can’t get the elements from the web page of the site, and the script works all the time.
How to organize scripts to access all elements?

Answer 1

So let the extension load in the same window on top of the websitename.com page a layer with your page or a modal window for the user to set the parameters you need. And the way you want, of course, will not work.

Answer 2

The simplest regex:
https://regex101.com/r/JLjISf/1