How do I inspect an Electron app's DOM from a script?

Question

I have an Electron app running on my computer (Slack). I would like to run some JavaScript that reads HTML DOM of this app. Is this possible? If so, is there a "getting started" somewhere?

In my mind, since Electron uses Node.js to host HTML / JavaScript, I can possibly read the DOM. At the same time, I could see this not being allowed because it could be a security risk. I'm ok with the security risk since it's running on my machine. So, I assume there would be a UAC prompt. Still, I'm just trying to figure out how to read the DOM from an external script if possible.

Thank you

Answer 1

From my understanding you want to inspect or manipulate some HTML of a electron app which is installed?

This is how I figured out how to access (on Mac OS) using Slack as an example:

1. Go to your Applications Folder -> Slack -> Right click "Show Package Contents"
2. Go To "Contents->Resources -> app.asar.unpacked"
3. You can check out how for example parts of the slack app work.

I tried this also with GChat app and they have an app folder. Technically speaking, you could add a script or something into the index.html / index.jade (slack) and hijack into the main.js or index.js scripts.

For example I was able to search for BrowserWindow Object inside the Chat App of Google Chat and add .webContents.openDevTools(); easily.

Yet any solution involves manual work.

For example in the main.js of of GChat I beautified the code, I searched for the Electron method buildFromTemplate and found the specific function where the View Menu is created. I simply added the following to that

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

And at the end I was able to easily toogle devtools (seen in the screenshot)