A simple wrapper of Facebook Messenger web client.


Why did I do this?

I wanted a quick way to view my conversations and be notified of new messages. When using Messenger from the browser, only the title of the tab containing the web client would change to notify of new messages. I decided to build a native macOS wrapper and display a badge notification when necessary.

What I learned

I already used the WebView component, but this time I implemented Key-Value Observing on its title property as a quick way to watch for new messages. I could then parse the title and find the number of new items to display in the notification's badge.

I also explored Affinity Designer to design the icon. I used a conversation bubble shape similar to the official Messenger icon, then added a wing graphic to represent the Hermes branding. Hermes is known as the Messenger of the gods and is usually represented with wings on his hat or his shoes.

Hermes icon design