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)

Answer 2

If you are thinking of accessing DOM through console (dev tools) like in a browser, then it's something you cannot do. Because dev tools are available only in development environment, once you build it, you cannot access it.

So running a script may require the electron app to include the script in the source code :

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

So if they included your script in their app, then you could change the content of the script to achieve what you are looking for.

Answer 3

You can add your script into the page (before it loads) and have it there to interact with any page you open in electron. The easiest way to do that is using preload paramater of new window.

Bear in mind, that you can even make connection with your nodejs script so there is really nice way of communicating with opened pages and your own script in node/electron.

More here: https://electronjs.org/docs/api/browser-window

preload String (optional) - Specifies a script that will be loaded before other scripts run in the page. This script will always have access to node APIs no matter whether node integration is turned on or off. The value should be the absolute file path to the script. When node integration is turned off, the preload script can reintroduce Node global symbols back to the global scope. See example here.