How to chage input in DOM via Chrome Extension

Question

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.

What I know on this moment:

code to change my inputs, which works in the browser console

polls = document.querySelectorAll('[id ^= "POOL"]');
Array.prototype.forEach.call(polls, callback);

function callback() {
    for (var i = 0; i < polls.length; i++) {
        polls[i].value = '300'; /* need sample_value here */
    }
}

simple html for extension popup

<input type="text" id="sample_value"></input>
<button type="button" id="button">Change</button>

simple html on my site

<input id="POOL2"></input>
<input id="POOL3"></input>
<input id="POOL4"></input>

some code for injecting

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' });
   });
});

What I don't understand

How to make all it work, because inline js is not allowed in popup
Question with "sample_value". Can i just do

polls[i].value = 'sample_value';

UPDATE 2

Ok, there is only one problem left, how to pass a variable from input(popup.html) to popup.js

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <div class="container">
    <input type="text" id="changeInput"></input>
    <button id="changeID">Change</button>
    <script src="popup.js"></script>
    </div>
  </body>
</html>

and popup.js

// When the button is clicked, inject setID into current page
changeID.addEventListener("click", async () => {
  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 ^= "POOL"]');
Array.prototype.forEach.call(polls, callback);

function callback() {
    for (var i = 0; i < polls.length; i++) {
        polls[i].value = changeInput; */ don't work, how to pass /*
    }
}
}

Use a separate popup.js file, [example](/q/13591983). Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. — wOxxOm, Apr 06 '22 at 12:25

score 1 · Accepted Answer · answered Apr 08 '22 at 04:01

problem solved via storage

document.getElementById("changeID").addEventListener("click", async() => {
    let [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });

    // Store sync value before the script is executed.
    let textBoxValue = document.getElementById('changeInput').value;
    chrome.storage.sync.set({
        textBoxValue
    });
    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() {
    chrome.storage.sync.get("textBoxValue", ({
        textBoxValue
    }) => {
        polls = document.querySelectorAll('[id ^= "POOL"]');
        Array.prototype.forEach.call(polls, callback);

        function callback() {
            for (var i = 0; i < polls.length; i++) {
                polls[i].value = textBoxValue;
            }
        }
    });
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 08 '22 at 08:12

How to chage input in DOM via Chrome Extension

1 Answers1