Background

We will implement active window tracking functionality within an Electron application with native code (Objective-C) on MacOS and bind it to our Electron app via NAPI. What this means is that, we will always notify our app from the native side, whenever a user changes from one window to another. Regardless of how the user changes between windows (e.g: CMD + Tab, clicking from one app to another), by the end of this tutorial, we will be able to get the id of the active window in the Javascript world. So you can use the window id later on to, for example, do some screen recording but that's out of the scope of this tutorial.

What will we cover:

1. We'll use electron-react-boilerplate to create an Electron app (if you already have an existing Electron app, feel free to use that as a starting point). At the time of writing, Electron is at v20.0.2.
2. We'll write the native code.
   1. Create the necessary files (activeWindowObserver.h, activeWindowObserver.mm, nativeWindows.mm)
   2. Write activeWindowObserver.h
   3. Implement activeWindowObserver.mm
   4. Implement nativeWindows.mm
3. Setup build scripts with electron-rebuild.
4. We'll create a Typescript wrapper for our native code.
5. We will call it from our main Javascript process and log the results to the console.

Prerequisites:

• Your app needs Accessibility permission, so if you run it from the Terminal, make sure to grant the Accessibility permission to the Terminal, and later, once you build it to a standalone app, to your app.

If you run it from VSCode's Terminal, make sure the permission is given to VSCode as that will be the owner process that spawns the Terminal. Same applies for any other integrated terminal.

• We assume that you're familiar with Typescript and Electron to a certain degree.

1. Create an Electron boilerplate

You should have a barebones electron boilerplate and stand inside the root of that folder.

2. Writing the native code

Install NAPI

We will use node-addon-api for binding our ObjectiveC++ code to Node. In this tutorial, we use v4.3.0. We'll create the necessary files for the build in a minute, but if you want to read more about setting it up, you can read it on github.

Create the folder structure for our native module

We will call our module native-windows, and we will create a macos folder in it, as we have the possibility to extend it for Windows as well.

Setup NAPI

In src/native-modules/native-windows, create a file named binding.gyp with the below content:

A .gyp file is basically a JSON file that is used to generate Makefiles used to compile our ObjectiveC++ program. It's consumed by node-gyp, which is the build tool we'll use. We assume that our app will be built on MacOS. We will need the Cocoa framework, to be able to use MacOS specific APIs. Node-gyp compiles a .node file from our ObjectiveC++ source code, that contains the bindings for our module and that can be imported to a js file.

Also add a package.json file here, with the below content:

This file basically marks that this module is a C++ module that we'll bind to NodeJS.

Create necessary files

In src/native-modules/native-windows/macos folder, create a activeWindowObserver.h, a activeWindowObserver.mm, and a nativeWindows.mm file.

The .h file is a header file. If you're not familiar with C++, consider .h files as interfaces, that define what is implemented in the .mm file in our case.

The activeWindowObserver.mm contains the implementation for what's defined in the .h file. The .mm extension is specific for ObjectiveC++.

The nativeWindows.mm file contains the bindings that enable us to use our module from JS.

Write activeWindowObserver.h

Implement activeWindowObserver.mm

Explanation of the above code:

• windowChangedCallback is used to track changes between windows that belong to the same application ​ You might wonder why that 30ms delay is before fetching again the frontmost window. Without delay, we always get the windows in the order of the previous state, so it was always one step behind what actually the user sees. Presumably it is caused by the lack of synchronicity of the APIs that we use, although it is just a guess. However, I filed an issue to Apple about this strange behaviour, as it might be a bug. In case you are interested in the future of this issue, you can track it on the following link: Apple Forum
• dealloc is used to remove observers
• init we add an observer to the notification center of the shared workspace that let's us listen to changes between applications
• receiveAppChangeNotification is the handler itself that's attached in init. In this handler, we define another observer, that subscribes to the window changes that belong to the same application (windowChangeCallback).
• getActiveWindow is responsible for getting the frontmost window's id
• removeWindowObserver detaches the observer
• cleanUp removes the window change observer, and the app change observer
• initActiveWindowObserver triggers the initialization of an instance of the above class, this is the function that we wrap with NAPI and call from JS
• stopActiveWindowObserver triggers the destruction of our instance and removes every listener

Implement nativeWindows.mm

Pretty straightforward, we just wrap the two methods we exposed from our module and make it available from JS.

3. Setup build scripts with electron-rebuild

Add the following lines to our main package.json file, that's in the Electron project's root.

If you have no errors in your native code, you should be able to build your module correctly by running npm run native-modules:rebuild or npm run native-modules:rebuild:arm depending on which platform you want to build for in your root folder.

It should have a similar output to this:

4. Create a Typescript wrapper for our native code

Add the below lines to .eslintrc.js if you've started from the electron-react-boilerplate

Add the following to src/native-modules/native-windows/index.ts

We export a nativeWindows variable that's our instantiated class with correcty typing, that imports our native code as addon from the compiled code.

5. Call our module from main.ts

Inside main.ts add the following import:

Somewhere below, after the app is ready, add the following code to test what we've done:

After that, start the app with npm start.

You should see logs like:

🎉This should be it, you're done. You should be able to track active windows on MacOS by this point.🎉

The complete code is available on our Github on the following link: https://github.com/scriptide-tech/blog-tracking-active-window-macos-objective-c-electron