Building a quick-chat view for Google Meet

This is the second post about building Meaty Meets, you can read the first one here.

🤯 Problem

As a presenter, I have noticed that it's easy to miss chat notifications during Google Meet calls. People, including myself, often struggle to locate the Google Meet tab amidst a sea of open tabs whenever there is a notification sound. This can lead to awkward pauses, as you thumb through all your open tabs, revealing to the audience who you really are (of course, we wouldn’t want that).

As the cliche goes, there had to be a better way!

💡Solution

The solution comprises of three main parts, which are:

1. Watching for new messages

2. Transmitting and storing the messages

3. Displaying the messages

Content scripts

Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension

[Source]

Content scripts can be used to watch the Google Meet page for any changes in the chat box section where new messages would show up. Vanilla JavaScript can be used to check the state of the chat box every fixed interval.

Message passing

Communication between extensions and their content scripts works by using message passing. Either side can listen for messages sent from the other end, and respond on the same channel.

[Source]

One-way messages were sufficient for this use-case; new messages detected by the content script could be sent to the Service Worker through the sendMessage function, and the service worker listened to the message from content scripts and stored them in the local storage.

Popup action

Extensions provide the functionality of showing custom popup UI when the extension icon on the toolbar is clicked. This was utilized to show the messages as it's easily accessible throughout.

As an icing on the cake, extension also provide support for displaying a badge:

A bit of text layered over the icon. This makes it easy to update the action to display a small amount of information about the state of the extension, such as a counter. The badge has a text component and a background color.

[Source]

I used this to show notification-count like UI for new messages.

That’s it, combining all three parts resulted in an easy-to-access chat box extension for Google Meet:

📝 Final thoughts

In conclusion, the power of browser extensions is truly remarkable. With capabilities such as storage, inter-process communication, and the ability to build frontends without hosting, extensions provide an incredible opportunity for developers to create unique and useful tools that enhance the user experience.

Having discovered the potential of extensions, I'm excited to explore further and find more ways to leverage them in my work. Compared to traditional web apps, extensions offers features that is hard to match. It's a technology that's definitely worth exploring and experimenting with for any developer looking to build innovative tools that solve real-world problems.