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:
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 */
}
}
<input type="text" id="sample_value"></input>
<button type="button" id="button">Change</button>
<input id="POOL2"></input>
<input id="POOL3"></input>
<input id="POOL4"></input>
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
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 /*
}
}
}
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;
}
}
});
}