有没有办法像Google Chrome DevTool那样在Https上下文中监控DOM的变化？

Question

我想在玩在线纸牌游戏的运行时记录浏览器窗口的某些DOM更改。当我查看Google Chrom Devtools时，我可以看到卡片上的图像编码数据: base64 /svg+xml item。有没有办法让这些项目进行进一步的处理，比如将它们写到文件中？

我试图写一个带有突变观察器的Chrome扩展，但是下面的方法在observer.observe(目标，配置)方法中抛出了一个错误，告诉我目标不是一个节点……

Css-Class "deck_by“只用在网站的body标签中...我希望所有的DOM变化都能被递归监控

    $(document).ready(function() {
      var target = $(".deck_by"); 

      // Create an observer instance
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

          console.log("mutation change in ", mutation.type, " name: ",mutation.target);
        chrome.extension.sendMessage({'Mutation': mutation})

        });
      });

      // Configuration of the observer
      var config = { attributes:true, subtree: true, childList: true };

      console.log(target);

      // Pass in the target node, as well as the observer options
      observer.observe(target, config);

    });

DevTools Screenshot

Answer 1

通过将manifest.json中的"content_scripts“部分从"run_at”："document_start“更改为"document_end”，解决了此问题。