如何從腳本中檢查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。 該值應該是腳本的絕對文件路徑。 關閉節點集成時，預加載腳本可以將節點全局符號重新引入全局范圍。 見這里的例子。