Javascript Chrome扩展：脚本运行多次_Javascript_Google Chrome Extension

Javascript Chrome扩展：脚本运行多次

javascript google-chrome-extension

Javascript Chrome扩展：脚本运行多次,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我有一个popup.html，它执行popup.js，与getchanges.js通信 HTML- <html> <script src="popup.js"></script> <body> <input type="text" value="value" id="myId" /> <button type="button" id="submitButton">Submit&

我有一个popup.html，它执行popup.js，与getchanges.js通信

HTML-

<html>
    <script src="popup.js"></script>
    <body>
        <input type="text" value="value" id="myId" />
        <button type="button" id="submitButton">Submit</button>
    </body>
</html>

getchanges.js-

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    console.log("script");
});

问题-每次单击submitButton时，我都会在控制台中获得正确的单击次数和发送次数，但我在控制台中获得的脚本比预期的多。实际上，它记录了我按下submitButton的次数

当我第二次按submitButton时，它会记录两次脚本。同样在第三次，它记录了三次

单击一次submitButton（提交）按钮后，如何在控制台中只记录一次脚本

任何关于解决方案的想法都值得赞赏。

chrome.tabs.executeScript具有误导性，它不会执行脚本，而是将脚本注入内容页，然后在那里运行。因此，每次按submit时，都会注入另一个副本，从而添加另一个事件侦听器

只需安排它，使脚本在DOM加载事件中只注入一次。

chrome.tabs.executeScript具有误导性，它不会执行脚本，它将脚本注入内容页，然后在那里运行。因此，每次按submit时，都会注入另一个副本，从而添加另一个事件侦听器

只需对其进行安排，使脚本仅在DOM加载事件中注入一次。

正如Troy Wray所建议的，我重新安排了我的脚本，它工作了

现在我的popup.js看起来像-

document.addEventListener("DOMContentLoaded", function(){
    var btn=document.getElementById("submitButton");
    var id;
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        id=tabs[0].id;
        chrome.tabs.executeScript({file: "getchanges.js"}, function(){
            console.log("injecting");
        });
    });
    btn.addEventListener("click", function(){
        var myId=document.getElementById("myId").value;
        chrome.tabs.sendMessage(id, {myId: myId}, function(result){
            //console.log(result);
        });
    });
});

现在它可以按要求工作了。

正如特洛伊·雷伊建议的那样，我重新安排了我的脚本，它工作了

现在我的popup.js看起来像-

document.addEventListener("DOMContentLoaded", function(){
    var btn=document.getElementById("submitButton");
    var id;
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        id=tabs[0].id;
        chrome.tabs.executeScript({file: "getchanges.js"}, function(){
            console.log("injecting");
        });
    });
    btn.addEventListener("click", function(){
        var myId=document.getElementById("myId").value;
        chrome.tabs.sendMessage(id, {myId: myId}, function(result){
            //console.log(result);
        });
    });
});

现在它已按要求运行。

请看@wOxxOm我应该在其中查看哪些内容？这里有一个示例如何防止内容脚本中的双重执行。请看@wOxxOm我应该在其中查看哪些内容？这里有一个示例如何防止内容脚本中的双重执行。