Creating an RTL solution for Microsoft Teams

I wanted to scratch my own itch, and this had led me to search for an easy way to add RTL support for the app, at least a temporary one, before it is supported natively.

I started with peeking over at Teams directory; I could quickly see that much like Slack, it’s built on top of Electron — A framework that lets one create cross-platform desktop apps with web front-end technologies.

Teams Directory Contents

Above, you can see a typical electron app directory tree:

app.asar.unpacked — Usually contains static assets and 3rd party npm modules

assets — Images, Icons and similar static files

locales — Multi language translations

app.asar — The packed app, in Electron’s archive format

electron.asar — Electron supplied libraries

Easy — just find a .js file that is loaded by Teams in the app.asar.unpacked, and add a custom payload there !

Or so I thought, at least. Going over the app’s unpacked directory unveiled only pre-compiled node modules (Basically, a bunch of .dll’s).

Teams Various Modules

The next thing that came to mind was creating a proxy dll that would inject a given payload; This was quickly dismissed as it would require a separate solution for my Mac-using colleagues.

With DLL proxying off the table, I thought of two other methods that may work.

Repackaging the app with a custom script that would provide the RTL logic

Teams’ app.asar unpacked via the asar packaging tool

2. Try to load the app in debug mode, and use chrome’s devtools protocol to inject a script in runtime (using Runtime.evaluate)

The clear advantage of the latter is that it won’t be overwritten by future updates, which tend to be quite frequent; And so I’ve decided to go through the second route.

Running Teams with a debugger server

Electron uses chromium as its under the hood engine, and so it’s possible to pass chromium-specific arguments when running electron based apps.

One of many useful parameters you may pass is ‘remote-debugging-port’, which let’s you connect a remote debugger to every window the app creates.

Firing up Teams with the flag set to a port of my choice, I could easily test it by surfing to chrome://inspect in chrome, after enabling network device lookup.

Chrome Inspect While Running Teams w/ — remote-debugging-port

Great — feels like progress ! Next, I went on to inspect the chat window to get a sense of the elements I’d need to operate on.