Chrome 擴展：content_script 無法正確接收來自 popup.js 的變量

Question

我正在學習如何制作 chrome 擴展。我試圖將 popup.html 中文本框的值發送到我的 content_script。 我在收到價值時遇到了一些問題。

這是我到目前為止所擁有的：

彈出窗口.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <p>Value1 Input:</p>
    <input type="text" id="myValue1">
    <p>Value2 Input:</p>
    <input type="text" id="myValue2">
    <p></p>
    <button id="clickactivity">Pass Value</button>
    <script src="popup.js"></script>
  </body>
</html>

彈窗.js

function injectTheScript() {
   
    var myValue1 = document.getElementById('myValue1').value 
    var myValue2 = document.getElementById('myValue2').value 
    var parameterArray = [];
    parameterArray.push(myValue1);
    parameterArray.push(myValue2);

    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
        chrome.scripting.executeScript({target: {tabId: tabs[0].id}, files: ['content_script.js']}, 
        function() {
             chrome.tabs.sendMessage(tabs[0].id, {myVar: parameterArray});
             
        });
    })
        
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript)

內容腳本.js

var myValue1;
var myValue2;


(function() {
    chrome.runtime.onMessage.addListener(function(message) {      
        myValue1=message.myVar[0];
        myValue2=message.myVar[1];
        console.log('myValue1 in addListener:'+myValue1);
        console.log('myValue2 in addListener:'+myValue2);

    });

})();

async function mainLoop() {
    
    console.log('into mainloop')
    console.log('myValue1 in mainLoop:'+myValue1);
    console.log('myValue2 in mainLoop:'+myValue2);
    
    ....//do something
}

mainLoop();

當我單擊 popup.html 中的傳遞值按鈕時，我遇到了以下問題。

第一次點擊時，我在文本框中設置了 myValue1=2 和 myValue2=2，日志是：

進入主循環
mainLoop 中的 myValue1：未定義
mainLoop 中的 myValue2：未定義
addListener:2 中的 myValue1
addListener:2 中的 myValue2

第二次單擊時，我在文本框中設置了 myValue1=3 和 myValue2=3，日志為：

進入主循環
mainLoop:2 中的 myValue1
mainLoop:2 中的 myValue2
addListener:3 中的 myValue1
addListener:3 中的 myValue2
addListener:3 中的 myValue1
addListener:3 中的 myValue2

我想在 mainLoop 中使用 myValue1 和 myValue2，但在第一次單擊時它們是未定義的。 看起來 mainLoop 在 addListener 之前運行。

第二次單擊時，mainLoop 中的兩個值都是 2（我希望它們都是 3）。 並且 addListener 被調用了兩次。看起來 mainLoop 以第一次單擊設置的值運行，然后 addListener 將值設置為 3。

我想知道如何修改我的代碼以使 content_script 從彈出窗口接收並在 mainLoop 運行之前設置 myValue1 和 myValue2。 另外，我想知道如何防止多次調用 addListener。謝謝。

Answer 1

感謝 wOxxOm； 移動 mainLoop()。 最后進入我的 onMessage 偵聽器解決我的第一個問題。 這兩個值都是正確的，對於第二個問題。 我通過使用 chrome.runtime.onMessage.removeListener 找到並回答以防止函數被多次調用。 我如下更改了我的 content_script.js，它工作正常！

內容腳本.js

var myValue1;
var myValue2;

chrome.runtime.onMessage.addListener(receiveMessage);

function receiveMessage(message){
        myValue1=message.myVar[0];
        myValue2=message.myVar[1];
        console.log('myValue1 in addListener:'+myValue1);
        console.log('myValue2 in addListener:'+myValue2);
        mainLoop();
        chrome.runtime.onMessage.removeListener(receiveMessage);
}

async function mainLoop() {
    
    console.log('into mainloop')
    console.log('myValue1 in mainLoop:'+myValue1);
    console.log('myValue2 in mainLoop:'+myValue2);
    
    ....//do something
}

Chrome 擴展：content_script 無法正確接收來自 popup.js 的變量

問題描述

1 個解決方案

解決方案1
0 已采納 2022-12-15 06:37:11

Chrome 擴展：content_script 無法正確接收來自 popup.js 的變量

問題描述

1 個解決方案

解決方案1 0 已采納 2022-12-15 06:37:11

解決方案1
0 已采納 2022-12-15 06:37:11