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

Question

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

我试图用 Mutation Observers 写一个 Chrome 扩展，但是下面的方法在方法 observer.observe(target, config) 中抛出了一个错误，告诉我目标不是一个节点...

Css-Class "deck_by" 仅用于站点的正文标记...我希望所有 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"

解决

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

Is there a way to monitor DOM changes in a Https context like Google Chrome DevTool does it?

javascript

https

dom

google-chrome-devtools