Building a Gmail Add-on with Apps Script

I recently sent an email where I typed code inline in the message body. I spent a good 15 minutes going through and formatting each line of code to look like, well, code.

I wanted an extension like Code Blocks that would instantly format my text to a specific preset style.

Rather than do some research to see if there’s anything like that already on the market, I decided to dive right into Apps Script for G Suite to build my own Gmail add on!

Apps Script 101

These are a few fundamentals I gleaned doing this project:

• Apps Script files end in .gs (I kept accidentally saving them as ‘.js’)
• You’ll need a json file called the ‘manifest’ to configure your app
• You’ll need to add scopes to authorize your app (even if you’re just building it for yourself)
• Check the limitations of the G Suite product you want to make an add-on for (you might be surprised at what you can and can’t do)
• The documentation is extremely helpful if you actually take the time to read it before you begin

Apps Script is notoriously beginner-friendly, so I was able to get started from scratch pretty quickly. I used G Suite’s Quickstart to learn the platform, and Kurt Kaiser’s Apps Script tutorials to fill in the knowledge gaps.

The Plan

I wanted to be able to highlight text in an email draft, click a button, and have that text instantly formatted to my preset font and color scheme.

My initial plan didn’t pan out: the Gmail API for Apps Script doesn’t support text selection event listeners. I had just assumed it would have text selection handling.

No problem — if I can’t utilize text selection, I’ll use a text input box. It’s a little less convenient than selecting text, but it’ll do!

Creating a Card Service

Building a G Suite add-on revolves around using a Card Service. I added a new Card Service and a Card Section with these widgets:

• newSelectionInput: radio buttons to select different preset format styles
• newTextInput: field to input text to be formatted
• newAction: triggers a function to apply the text input and selection input to the Gmail message
• newTextButton: calls the action
• newButtonSet: holds the text button

Apps Script creates all the layouts and styling behind the scenes, which saves you from spending time building the HTML and CSS but also limits you to using a predetermined design. Here’s the resulting user interface:

Now that I had my basic code done, I wanted to add styles to the selection input labels so that they would work as a “preview” of each format. I tinkered around for a while trying to add custom styles to the Card Service.

No luck.

Oh, well — I can always make my label names descriptive enough that I don’t even need a preview to know what they’ll look like:

Adding the Formatted Text

I designed the radio selector inputs to each correspond to a string that contains a different inline style.

The selected style along with the inputted text will be passed to the action response, which uses these strings to create a snippet of HTML.

The resulting HTML string will then be appended to my email draft.

Success!

Victory Lap

Apps Script is really beginner-friendly and easy to navigate, with excellent documentation. It’s a great feeling to be able to dive into a new software and get your idea up and running in an afternoon.

Sure, I didn’t get to implement my initial plan of using text selection.

Yes, it would be preferable to have a preview of each format instead of relying on the label to describe its style.

And yeah, sure, I have to manually edit the code any time I want to add or change a preset format.

But I built a Gmail add-on that shaves several seconds off my time when I want to add specific formats to text in a draft. I consider this a win!