Question

我为kat.cr编写了一个Greasemonkey userscript，它在'等待反馈的Torrent'弹出窗口中添加了一些额外的按钮。

程序是这样的：（前提是您已登录并且您已经下载了一些“等待反馈”的种子）：
单击FEEDBACK按钮后，会出现“等待反馈的Torrent”弹出窗口，
包含等待反馈的种子，
即例如style.display属性。元素#fancybox-wrap 从none变为block （正如我在Firefox Inspector中注意到的那样）。

我目前使用setTimeout插入延迟，直到出现弹出窗口。

我想改进剧本所以，我想使用MutationSummary （作为MutationObserver更实用的解决方案）
为了监控上述元素的属性style.display的变化，
并在发生更改后添加我的额外按钮。

我的代码结构如下：

document.querySelector('.showFeedback > a').addEventListener('click', function () {

  var observer = new MutationSummary({
    callback: myF,
    queries: [
      {
        element: '#fancybox-wrap',
        elementAttributes: 'style.display'
      }
    ]
  });

  function myF(muteSummaries) {
    var mSummary = muteSummaries[0];
    mSummary.valueChanged.forEach(function(changeEl) {
      console.log('Attribute changed'); // Here I would add my code of inserting the extra buttons
    }      

});

不幸的是console.log未执行请注意，如果我将elementAttributes: 'style.display'更改为elementAttributes: 'style'
然后我在浏览器控制台中获得TypeError: mSummary.valueChanged is undefined。
我该如何解决这个问题？

以下是使用MutationObserver的代码的工作版本：

document.querySelector('.showFeedback > a').addEventListener('click', function() {

    var target1 = document.querySelector('#fancybox-wrap');

    var observer1 = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (document.querySelector('#fancybox-wrap').style.display == 'block') {
                console.log('Attribute changed');
            }
        });
    });

    var config = {
        attributes: true,
        childList: true,
        characterData: true
    };

    observer1.observe(target1, config);

});

MutationSummary - 观察元素上的特定属性，并在该属性获取特定值后执行一些代码

0 个答案: