Develop My First Gmail Add-on via Google Apps Script: My Software Engineer Internship at dialoggBox

Nancy Dai
Nancy Dai
Aug 26 · 7 min read

First of all, who am I?

I’m a teacher-turned-developer actively searching my first software engineer job during the pandemic after graduating from Hackbright Academy. As a bootcamp new grad, I am lucky to get an internship opportunity to develop a gmail add-on product at dialoggBox to gain my first industry experience and learn how to work with stakeholders.

My article will be composed of three parts:

  • What service do dialoggBox and this gmail add-on provide?
  • What was my experience using Google Apps Script to build an add-on product?
  • How did I develop each section of the gmail add-on?

DialoggBox: Empowering Remote Communication

DialoggBox is an AI NLP (Natural Language Processing) startup company empowering remote work communication by generating a summary on the long meeting or conversation you had. Whenever you need to review those long meetings, dialoggBox provides you with insights via various graphics, including analyzing the main takeaways from the meeting, sentiments of the overall conversation or each participant, the dynamics within the dialogue, etc.

The dialoggBox gmail add-on is a mini version of dialoggBox’s main product and is developed to help dialoggBox to reach more clients in the G Suite marketplace.

It helps gmail users quickly get the main takeaways of a long thread containing back-and-forth messages from multiple senders. It also supports analyzing the sentiment of the thread, the key words mentioned by each participant and the dynamics of the participation.

Image for post
Image for post
Image for post
Image for post

Apps Script: An Important Tool for G Suite Add-ons

To create a G Suite add-on, you will need to use Apps Script services to code up your app, test and finally publish to the G Suite Marketplace.

Compared with your Vim or Sublime text editor, Google Apps Script only accepts JavaScript. However, it has a “publish” feature for you to easily deploy any standalone scripts or scripts bound to G Suite applications without reaching out for external service.

Creating Files

First, you’ll start with creating your project at the Google Apps Script dashboard.

After naming your project, you usually create at least one file per each G Suite app to retrieve data for future use and another “common” file for the main functions of your add-on.

Image for post
Image for post
Script files and appsscript manifest file

As you see in the picture above, most file names ended with “.gs”. This is the fixed file extension for Apps Script. You don’t want to change it to “.py” or “.js”.

Another thing you might notice is the “appsscript.json” file. It’s similar to the manifest file you might have already known. You don’t need to create it, but you can generate it from the view menu. In the view drop-down menu, click on the “Show manifest file”, and it will appear automatically.

In the “appsscript.json” file, you can name your app (not the project name for you but the name for users to see at the top of the add-on tab), adjust the time zone, whitelist external addresses, and provide the url for your logo, the oauth scopes and the function names to trigger the contextual functions based on different G Suite apps.

For example, if I have a function called “onGmailMessage” in the “gmail.gs” file to process the data from each email the user opens, I have to provide the name “onGmailMessage” in the “appsscript.json” file to make it work.

Image for post
Image for post
Image for post
Image for post
In appsscript.json, include the function name from gmail.gs so that the function will be triggered when opening a gmail message

Testing

Next, to test the function you wrote, you can either choose to a) print out something or b) visualize the add-on in the G Suite app.

For choice a, you will go to the “Select Function” drop-down menu to choose which function you want to test and hit the run button on the left. Don’t forget to provide sample data for testing. Control + Enter is a shortcut to open the logger.

As for choice b, you will need to publish the add-on first. Go to the “Publish” drop-down menu. Since it’s still under development, you should choose “deploy from manifest” rather than “deploy as add-on”.

Image for post
Image for post
Image for post
Image for post
For testing purpose, go to Publish — Deploy from manifest; install the add-on

Then, you can create a new version to save your progress at this moment, just like a git commit. Install this add-on and go to the G Suite app. The logo should appear on the side bar. Click on it and authorize the add-on. There you go!

Image for post
Image for post
The logo of the add-on appears on the side bar of your gmail

Once you finish building your add-on, submit it to Google for approval. When you hear back from them, you are ready to deploy it to the G Suite Marketplace!

Challenges and Resources during the Gmail Add-on Development

There are plenty of good examples (such as the Cats project) and useful articles on Google developer documentation , which I highly recommend you to check in frequently while developing any G Suite add-on. You should be able to find most answers to your questions there:

Besides, don’t forget to search the problems you encountered with Apps Script on Stack Overflow.

Finally, I’d like to talk about some challenges I had when developing the add-on using Apps Script and what I have learned from them.

How to Read a New Documentation and Solve Your Problem

I would say developing Google add-on is more a front end work and Google has already done a lot behind the scene. They’ve created hundreds of classes for you to grab and go. All you have to do is to read their documentation intensively.

Reading!

Reading!!

If this is your first time developing a G Suite add-on and you are someone who hate reading, I can imagine how frustrated you would be:

“The solution must be in the documentation. Once I find it, the feature I want will be done in a few seconds. But … [after 20 minutes]… I can’t find it!”

At this moment, how I wish the documentation could include an example with pictures for each feature. I know it can be a lot of work for the writers, but great documentation can save developers’ life!

Here’re my tips for reading new documentation and solving problems from my practice:

  1. Always follow the quick start documentation to try out an example: This is very helpful for you to get a general idea of how to build and where to start. As for a gmail add-on, use this Cats example.
  2. Write clear documentation: Add comments for each function and block of your codes so that you or your colleagues can reuse them in the future.
  3. Search: Take advantage of the Search function in the documentation and use control+F to speed up scanning through the articles.
  4. Turn to Google or Stack Overflow for help: If you can’t find solution within the documentation in 10 minutes, don’t waste your time repeating the same searching process. You probably won’t find it in another 20 mins or 30 mins, either. Go to external resources. Google and Stack Overflow are your best friends forever.
  5. Change the key words for your research if no search results come up.
  6. Look for an alternative solution: if nothing works, you may have to review how your design the feature or the function.
  7. Don’t hesitate to ask other engineers in your team for help:

The last tip is the most important one, especially for those who are introverts or new to the workplace.

Getting the work done is a shared goal for your team. Everyone learns from each other, gets support from each other, and inspires each other. There’re never stupid questions, so, don’t be shy to reach out and ask questions!


Even though developing a Gmail add-on is not a big full stack project, it is a really interesting experience for me. I truly learned a lot at dialoggBox by working with the CEO Ms. Ritu this summer.

Thanks for your time reading my internship experience until here. Two more takeaways I learned from Ms. Ritu:

  • Break down a big problem into a smaller piece, as small as you can; then, you may know how to solve it.
  • Make sure you are clear about the requirements or the expectations of the product. Communication matters. Always let your team know if you have any questions.

Adiós!

(If you are interested in learning the details of how I developed the features for the dialoggBox gmail add-on, please wait for my next article: Build G Suite Add-on Features with Google Apps Script.)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store