如何从脚本中检查 Electron 应用程序的 DOM？答案

【问题标题】：How do I inspect an Electron app's DOM from a script?如何从脚本中检查 Electron 应用程序的 DOM？
【发布时间】：2019-04-19 17:27:59
【问题描述】：

我的计算机上运行了一个 Electron 应用程序 (Slack)。我想运行一些 JavaScript 来读取这个应用程序的 HTML DOM。这可能吗？如果是这样，某处是否有“入门”？

在我看来，由于 Electron 使用 Node.js 来托管 HTML / JavaScript，我可能可以读取 DOM。同时，我可以看到这是不允许的，因为它可能存在安全风险。我可以接受安全风险，因为它在我的机器上运行。所以，我假设会有一个 UAC 提示。不过，如果可能的话，我只是想弄清楚如何从外部脚本中读取 DOM。

谢谢

【问题讨论】：

这可能涉及修补 ASAR 文件。
您能告诉我们更多关于您的用例的信息吗？您是否需要让另一个应用程序访问您观察到的应用程序，或者正如@estus 建议的那样，是否足以设法进入观察到的应用程序？
@snwflk 我需要另一个应用程序访问该应用程序才能观察。我无法编辑要检查的应用的 ASAR 文件。
我的电脑上运行了一个 Electron 应用程序 (Slack) - 你能详细说明一下吗？这是否意味着 Slack Electron 应用程序或 Slackware Linux？ 无法编辑我要检查的应用程序的 ASAR 文件 - 你能提供原因吗？如果是 Slack，我不明白为什么不能修改 ASAR。当然可以在没有 ASAR 补丁的情况下执行此操作，因为 Electron 是一个进程，您可以以 root 身份侵入任何进程。但我不确定是否有一种实用的方法可以在答案中解释，并且不需要几个月的破解和 EULA 违规。
@ZachTempleton，因为您的赏金也即将结束（或已经结束），如果有任何答案对您有用的话，如果您能获得一般反馈，那将非常棒。

标签： javascript node.js electron

【解决方案1】：

据我了解，您想检查或操作已安装电子应用程序的某些 HTML？

这就是我以 Slack 为例了解如何访问（在 Mac OS 上）的方法：

转到您的应用程序文件夹 -> Slack -> 右键单击“显示包内容”
转到“内容->资源-> app.asar.unpacked”
您可以查看例如 slack 应用程序部分的工作原理。

我也尝试使用 GChat 应用程序，他们有一个 app 文件夹。从技术上讲，您可以在 index.html / index.jade (slack) 中添加脚本或其他内容，然后劫持到 main.js 或 index.js 脚本中。

例如，我可以在 Google Chat 的聊天应用中搜索 BrowserWindow 对象并轻松添加 .webContents.openDevTools();。

然而，任何解决方案都涉及手动工作。

例如在GChat的main.js我美化了代码，我搜索了Electron方法buildFromTemplate，找到了View菜单创建的具体函数。我只是在其中添加了以下内容

 {
          role: "toggledevtools",
          label: "Toogle Dev Tools"
        }

最后我能够轻松地使用 devtools（在屏幕截图中看到）

【讨论】：

【解决方案2】：

如果您正在考虑像在浏览器中一样通过控制台（开发工具）访问 DOM，那么这是您无法做到的。因为开发工具只在开发环境中可用，一旦你构建它，你就无法访问它。

所以运行脚本可能需要电子应用在源代码中包含脚本：

<script src="your-script.js"></script>

因此，如果他们将您的脚本包含在他们的应用程序中，那么您可以更改脚本的内容以实现您正在寻找的内容。

【讨论】：

【解决方案3】：

您可以将您的脚本添加到页面中（在它加载之前）并让它在那里与您在电子中打开的任何页面进行交互。最简单的方法是使用 preload 新窗口的参数。

请记住，您甚至可以与您的 nodejs 脚本建立连接，因此在 node/electron 中与打开的页面和您自己的脚本进行通信是一种非常好的方式。

preload String（可选）- 指定将在页面中运行其他脚本之前加载的脚本。无论节点集成是打开还是关闭，此脚本都将始终可以访问节点 API。该值应该是脚本的绝对文件路径。当节点集成关闭时，预加载脚本可以将节点全局符号重新引入全局范围。请参阅此处的示例。

【讨论】：