如何将 DOM 中的输入更改为 Chrome 扩展

Question

思路：弹窗中有一个字段和一个按钮的扩展。在字段中输入一个值并按下一个按钮。之后，活动页面上所需的输入将更改为输入的值。

此刻我所知道的：

更改输入的代码，可在浏览器控制台中使用

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>

在我的网站上 html 简单

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

不明白的地方

如何让它工作，因为弹出窗口中不允许内联js
带有“sample_value”的问题。我可以做吗

polls[i].value = 'sample_value';

更新 2

好了，只剩下一个问题了，如何将一个变量从input(popup.html)传递给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>

和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 /*
    }
}
}

Answer 1

问题已通过存储解决

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

如何将 DOM 中的输入更改为 Chrome 扩展

How to chage input in DOM via Chrome Extension

javascript

html

google-chrome-extension