Quickstart: Create an add-on in any coding language

Stay organized with collections Save and categorize content based on your preferences.

Create a Google Workspace Add-on in Cloud Functions without using Apps Script.

Objectives

  • Create a Cloud Function.
  • Call Google to invoke the add-on.
  • Create an add-on deployment.
  • Install the add-on.

Prerequisites

Create a Cloud Function

  1. In a local terminal, turn on the Cloud Functions, Cloud Build, and the Add-ons API:

    gcloud services enable cloudfunctions cloudbuild.googleapis.com gsuiteaddons.googleapis.com
    
  2. In an empty directory, create the file function.js with the following sample code:

    /**
     * Google Cloud Function that loads the homepage for a
     * Google Workspace Add-on.
     *
     * @param {Object} req Request sent from Google
     * @param {Object} res Response to send back
     */
    exports.loadHomePage = function addonsHomePage (req, res) {
      res.send(createAction());
    };
    
    /** Creates a card with two widgets. */
    function createAction() {
      return {
        "action": {
          "navigations": [
            {
              "pushCard": {
                "header": {
                  "title": "Cats!"
                },
                "sections": [
                  {
                    "widgets": [
                      {
                        "textParagraph": {
                          "text": "Your random cat:"
                        }
                      },
                      {
                        "image": {
                          "imageUrl": "https://cataas.com/cat"
                         }
                      }
                    ]
                  }
                ]
              }
            }
          ]
        }
      };
    }
    
  3. Deploy the function:

    gcloud functions deploy loadHomePage --runtime nodejs12 --trigger-http
    
  4. Verify the function is deployed:

    gcloud functions call loadHomePage
    

Call Google to invoke the add-on

  1. Find the service account email for the add-on:

    gcloud workspace-add-ons get-authorization
    
  2. Grant the service account the cloudfunctions.invoker role:

    gcloud functions add-iam-policy-binding loadHomePage \
        --role roles/cloudfunctions.invoker \
        --member serviceAccount:SERVICE_ACCOUNT_EMAIL
    

Create an add-on deployment

  1. Get the URL of the deployed function:

    gcloud functions describe loadHomePage
    
  2. Create the file deployment.json with the following sample code. Replace URL with the URL of the deployed function from the previous step.

    {
      "oauthScopes": ["https://www.googleapis.com/auth/gmail.addons.execute"],
      "addOns": {
        "common": {
          "name": "My HTTP Add-on",
          "logoUrl": "https://raw.githubusercontent.com/webdog/octicons-png/main/black/beaker.png",
          "homepageTrigger": {
            "runFunction": "URL"
          }
        },
        "gmail": {},
        "drive": {},
        "calendar": {},
        "docs": {},
        "sheets": {},
        "slides": {}
      }
    }
    
  3. Create the deployment:

    gcloud workspace-add-ons deployments create quickstart \
        --deployment-file=deployment.json
    

Install the add-on

  1. Install the deployment in development mode:

    gcloud workspace-add-ons deployments install quickstart
    
  2. Open or reload Gmail to view the add-on. In the toolbar on the right, look for a beaker icon.

  3. Click the icon to open the add-on.

Clean up

  1. Uninstall the add-on from your Google Account:

    gcloud workspace-add-ons deployments uninstall quickstart
    
  2. To avoid incurring charges for the resources used in this quickstart, delete the project:

    gcloud projects delete PROJECT_ID
    

    Replace PROJECT_ID with the ID of the project that you used for the quickstart. You can find the project ID in the Cloud console on the Dashboard page.