如何从脚本检查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. 例如，您可以查看 slack 应用程序的某些部分是如何工作的。

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

例如，我可以在BrowserWindowGoogle Chat 的 Chat App 中搜索Object 并.webContents.openDevTools();轻松添加。

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

比如在main.jsGChat的我美化了代码，搜索了Electron的方法buildFromTemplate，找到了View创建Menu的具体函数。我只是添加了以下内容

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

最后我能够轻松地使用 devtools（见截图）