title: How to chage input in DOM via Chrome Extension
body: <p>Idea: The extension in the popup of which there is a field and a button. A value is entered in the field and a button is pressed. After that, the required inputs on the active page are changed to the entered value.</p>
  <p><strong>What I know on this moment:</strong></p>
  <ul>
  <li>code to change my inputs, which works in the browser console</li>
  </ul>
  <pre><code>polls = document.querySelectorAll('[id ^= &quot;POOL&quot;]');
  Array.prototype.forEach.call(polls, callback);
  
  function callback() {
      for (var i = 0; i &lt; polls.length; i++) {
          polls[i].value = '300'; /* need sample_value here */
      }
  }
  </code></pre>
  <ul>
  <li>simple html for extension popup</li>
  </ul>
  <pre><code>&lt;input type=&quot;text&quot; id=&quot;sample_value&quot;&gt;&lt;/input&gt;
  &lt;button type=&quot;button&quot; id=&quot;button&quot;&gt;Change&lt;/button&gt;
  </code></pre>
  <ul>
  <li>simple html on my site</li>
  </ul>
  <pre><code>&lt;input id=&quot;POOL2&quot;&gt;&lt;/input&gt;
  &lt;input id=&quot;POOL3&quot;&gt;&lt;/input&gt;
  &lt;input id=&quot;POOL4&quot;&gt;&lt;/input&gt;
  </code></pre>
  <ul>
  <li>some code for injecting</li>
  </ul>
  <pre><code>document.getElementById('button').addEventListener('click', function() {
     chrome.tabs.query({ active: true, currentWindow: true}, function(activeTabs) {
         chrome.tabs.executeScript(activeTabs[0].id, { code: 'YOUR CODE HERE' });
     });
  });
  </code></pre>
  <p><strong>What I don't understand</strong></p>
  <ol>
  <li>How to make all it work, because inline js is not allowed in popup</li>
  <li>Question with &quot;sample_value&quot;. Can i just do</li>
  </ol>
  <pre><code>polls[i].value = 'sample_value';
  </code></pre>
  <p><strong>UPDATE 2</strong></p>
  <p>Ok, there is only one problem left, how to pass a variable from input(popup.html) to popup.js</p>
  <p>popup.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;button.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;changeInput&quot;&gt;&lt;/input&gt;
      &lt;button id=&quot;changeID&quot;&gt;Change&lt;/button&gt;
      &lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and popup.js</p>
  <pre><code>// When the button is clicked, inject setID into current page
  changeID.addEventListener(&quot;click&quot;, async () =&gt; {
    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: setID,
    });
  });
  
  
  // The body of this function will be executed as a content script inside the
  // current page
  function setID() {
  polls = document.querySelectorAll('[id ^= &quot;POOL&quot;]');
  Array.prototype.forEach.call(polls, callback);
  
  function callback() {
      for (var i = 0; i &lt; polls.length; i++) {
          polls[i].value = changeInput; */ don't work, how to pass /*
      }
  }
  }
  </code></pre>