I am working on a JavaScript-based browser script / Chrome extension and I want to continuously monitor text that a user types into input fields or textareas on a webpage.

What I want to achieve

• Detect text entered by the user in:

  • elements

  • </code> elements</p> </li> <li><p>contenteditable elements (if possible)</p> </li> </ul> </li> <li><p>Read or log the <strong>current value every second</strong></p> </li> <li><p>The solution should work <strong>without modifying the website’s source code</strong> (i.e., via a content script or injected JS)</p> </li> </ul> <h4>What I have tried</h4> <ul> <li><p>Using <code>setInterval()</code> to poll input values</p> </li> <li><p>Using <code>document.querySelectorAll('input, textarea')</code></p> </li> <li><p>Listening to <code>input</code> and <code>keydown</code> events</p> </li> </ul> <p>However, I am unsure:</p> <ul> <li><p>Which approach is <strong>more efficient</strong> (event listeners vs polling)</p> </li> <li><p>How to <strong>reliably detect dynamically created input fields</strong></p> </li> <li><p>How to handle <strong>single-page applications (SPAs)</strong> where DOM updates frequently</p> </li> </ul> <h4>Constraints</h4> <ul> <li><p>JavaScript only (no backend processing)</p> </li> <li><p>Runs in the browser (content script / injected script)</p> </li> <li><p>Should not rely on external libraries</p> </li> </ul> </div> </div> <div class="tags"> <span class="tag">javascript</span> <!--<span class="tag">Async</span>--> <!--<span class="tag">Promises</span>--> </div> </div> <!-- Add Answer (only visible if logged in) --> <div id="addAnswerSection" class="add-answer" style="display: none;"> <h4>Your Answer</h4> <form> <div class="mdl-textfield mdl-js-textfield"> <textarea class="mdl-textfield__input" rows="4" id="answer" > Write your answer...