Question

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

HTML -

class MyClass {
   public static setProperty(key: 'name', value: string): void;
   public static setProperty(key: 'age', value: number): void;
   public static setProperty(key: string, value: (string | number)): void {}
}

MyClass.setProperty('name', 42); // Argument of type '"name"' is not assignable to parameter of type '"age"'.
MyClass.setProperty('age', 42); // Ok
MyClass.setProperty('name', 'foo'); // Ok
MyClass.setProperty('age', 'foo'); // Argument of type '"foo"' is not assignable to parameter of type 'number'.

popup.js -

type StringProperty = 'name' | 'address';
type NumberProperty = 'age' | 'salary';
class MyClass {
   public static setProperty(key: StringProperty, value: string): void;
   public static setProperty(key: NumberProperty, value: number): void;
   public static setProperty(key: string, value: (string | number)): void {}
}

getchanges.js -

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

问题 - 在每个 submitButton 上点击我在控制台中获得点击和发送的正确数量但我得到脚本< / strong>在控制台中超出预期。实际上它记录脚本我按下 submitButton 的次数。

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

如果在单个 submitButton 点击一次，只需在控制台中记录一次脚本，我该怎么做。

对此解决方案表示赞赏。

Answer 1

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

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

Answer 2

正如Troy Wray所建议的那样here，我重新安排了我的脚本并且它有效。

现在我的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);
        });
    });
});

现在它正在按要求工作。

Chrome扩展程序：脚本运行多次

2 个答案: