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

【问题标题】：Is there a way to monitor DOM changes in a Https context like Google Chrome DevTool does it?有没有办法像 Google Chrome DevTool 一样监控 Https 上下文中的 DOM 变化？
【发布时间】：2019-07-31 17:05:21
【问题描述】：

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

我尝试使用 Mutation Observers 编写 Chrome 扩展，但以下方法在方法 observer.observe(target, config) 中引发错误，告诉我目标不是节点...

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

【问题讨论】：

您的target 不是HTML 节点，实际上，它是一个jQuery 对象。试试var target = $(".deck_by")[0];。不过，这只是一个测试，如果您有多个具有 deck_by 类的元素，则必须在目标上循环以添加观察者
不幸的是 var target = $(".deck_by")[0]; 确实返回 'undefined'
如果无法指定现有元素，请注意document.body ..?
我就是这样做的：
<body style="" class="deck_by">

标签： javascript dom https google-chrome-devtools

【解决方案1】：

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

【讨论】：