Question

我有一个Chrome扩展程序，可以在发布Twitter消息之前对其进行拦截和检查。为此，我将事件监听器添加到Tweet按钮。正因为内容是动态的，所以我使用solution proposed in this thread：

initialize : function() {
    let that = this;
    let jsInitChecktimer = setInterval(checkForJsFinished, 111);
    function checkForJsFinished () {
        if (document.querySelector("div[data-testid='tweetButtonInline']")) {          
            clearInterval (jsInitChecktimer);
            console.log("Button found");
            that.addSubmitNewTweetClickHandler();
        }
    }
},

addSubmitNewTweetClickHandler : function() {
    let that = this;
    let buttonSubmitTweet = document.querySelector("div[data-testid='tweetButtonInline']");
    buttonSubmitTweet.addEventListener('click', function(e) {
        console.log("CLICK");
        // Stop default event from happening
        e.preventDefault();
        e.stopImmediatePropagation();
        // Do stuff
    });
},

如果该推文顺利通过检查，则可以通过使用.trigger('click')以编程方式触发事件来提交。

这很好，但是只有一次。提交并发布推文后，Tweet按钮上的事件侦听器消失了，我无法截取下一条推文以进行检查。我尝试过再次提交后调用initialize() －也许按钮被删除并重新添加到DOM中（提交tweet时它实际上消失了，一会儿就消失了）－但是querySelector找到了按钮立即。但是即使再次调用initialize()，也不会触发Tweet按钮。

这里可能是什么问题？我的问题是我什至不知道在哪里寻找以及如何调试它。

Answer 1

再过几个小时，我终于弄明白了。问题本质上是新Twitter网站的高度动态内容。提交推文后，Tweet按钮确实被删除并再次添加。在需要进行重大更改的地方：

使用MutationObserver来跟踪所有更改。每次进行更改时，请调用initialize()函数。为避免电话过多，我会在进行某些更改（此处不必要的详细信息）的情况下执行此操作

更改addSubmitNewTweetClickHandler()方法，以便首先删除事件侦听器，以避免重复的侦听器（请注意，与原始问题相比，我使用对象，因此使用this）

addSubmitNewTweetClickHandler : function() {
  let that = this;
  let buttonSubmitTweet = document.querySelector("div[data-testid='tweetButtonInline']");
  buttonSubmitTweet.removeEventListener('click', this.handleSubmitNewTweetClick ); 
  this.handleSubmitNewTweetClick = this.handleSubmitNewTweetClick.bind(this)
  buttonSubmitTweet.addEventListener('click', this.handleSubmitNewTweetClick );    
},

此更改是创建参考函数handleSubmitNewTweetClick

总的来说，它仍然不是一个完美的解决方案，因为我打电话给initialize()很多不必要的时间。但是，我无法可靠地确定何时将Tweet按钮添加到文档中。当我使用MutationObserver时，没有一个添加的节点具有属性data-testid，我需要标识正确的按钮。我有节点的想法，为什么这个属性不存在。也许属性是在添加到按钮后添加了几次，但是即使使用额外的MutationObserver寻找属性更改，我也可以检测到。

无论如何，它现在可以使用，并且仅适用于原型。

JavaScript点击事件监听器仅触发一次

1 个答案: