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

Question

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

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

谢谢

Answer 1

根据我的理解，你想检查或操纵一些已安装的电子应用程序的HTML？

这就是我如何使用Slack作为示例来解决如何访问（在Mac OS上）：

1. 转到您的应用程序文件夹 - > Slack - >右键单击“显示包内容”
2. 转到“目录 - >资源 - > app.asar.unpacked”
3. 您可以查看松弛应用程序的示例部分是如何工作的。

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

例如，我能够在Google Chat的聊天应用程序中搜索BrowserWindow对象并添加.webContents.openDevTools(); 容易。

但任何解决方案都涉及手工操作

例如，在main.js中，我美化了代码，我搜索了Electron方法buildFromTemplate并找到了创建View菜单的特定功能。 我只是添加了以下内容

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

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

Answer 2

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

因此，运行脚本可能需要电子应用程序在源代码中包含脚本：

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

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

Answer 3

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

请记住，您甚至可以与nodejs脚本建立连接，这样就可以很好地与已打开的页面和节点/电子中的脚本进行通信。

更多信息： https ： //electronjs.org/docs/api/browser-window

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