A Modern Gmail Add-on Build Process

Let me help you avoid the pitfalls and work in a sane development environment

Today, we launched a new Gmail add-on that gives our customers the ability to interact with Clio directly within Gmail. For many of our customers, logging email messages and saving attachments to Clio is critical for keeping track of client communications and is performed multiple times throughout the day. This add-on seeks to help make tasks like these easier by allowing them to be done in the same place where those emails are read and composed.

The add-on itself is a panel that becomes visible when you open an individual message thread in Gmail. This panel can be used to provide additional information, display UI elements to allow users to interact with external services, or to take other actions without leaving Gmail. These add-ons are available for both the web and Android (in the Gmail Android app) and the experience is very consistent between them. A single add-on project will look and work the same on both platforms.

Getting started using the example markup and the UI card system is simple enough. Everything is executed on Google’s own servers using an internal protocol which pushes the UI to the add-on. Nothing is actually run client-side, which means you can’t use CSS, custom HTML templates, or libraries like React and Angular. While this might make the user experience more consistent from add-on to add-on, it does impose constraints on developers who are accustomed to using these tools. This post will discuss how to leverage the modern javascript toolchain while working in this ecosystem.

First, we should head over to the quickstart guide and complete the steps to set up our Gmail add-on. This gives us a look at a basic workflow and it should include everything we need to deploy an add-on that we can see in action right away.