How to Build G Suite Add-ons with Google Apps script?

G Suite is a Google service that provides access to a core set of applications like Gmail, Calendar, Drive, Docs, Sheets, Slides, Forms, Meet, etc. Add-ons means the extension given to the pre-existing G Suite products (mentioned above). Developers can add many extra features to such products. Add-ons always run inside the G Suite products. We can create sidebars, dialogs, modals and add functionality to them in a seamless manner. Usually, we use the add-ons from G Suite Marketplace.

Examples of Add-ons:

 Coding your own Add-on:

Here we’ll create an Add-On to send an E-mail from Google Docs (G Suite product). Follow the below steps to create an Add-On:

 Step 1: Go to docs.google.com > Create a blank Document > Tools > This brings up the (<> Script editor) as shown below:

Make sure that you are logged in with any of your Google account. Henceforth, you can proceed with Apps Script.

Here, The .gs file extension is associated with the Google Apps Script, a scripting language based on JavaScript for the G Suite products.

On hitting the plus button a dropdown menu will appear containing two options (HTML and Script). 

These HTML and Script files are used to add our custom designs.

 Step 2:   This is the Apps script code to be added to the .gs file.

Javascript

/**
 * Send an E-mail with the help of Google Docs.
 */
function createAndSendDocument() {
  // Create a new Google Doc named 'Hello, Geeks For Geeks!'
  var doc = DocumentApp.create('Hello, Geeks For Geeks!');

  // Access the body of the document, then add a paragraph.
  doc.getBody().appendParagraph('My custom Add-on');

  // Get the URL of the document.
  var url = doc.getUrl();

  // Active User's E-mail address.
  var email = Session.getActiveUser().getEmail();

  // Get the name of the document to be used.
  var subject = doc.getName();

  // Append a new string to the "url" variable to use as an email body.
  var body = 'Link to your doc: ' + url;

  // Send yourself an email with a link to the document.
  GmailApp.sendEmail(email, subject, body);
}

Step 3:  Run the code as shown below. You will receive an email with a “Hello Geeks for Geeks!” message after the successful execution of your code. And we are done with our first Apps Script. Now to publish this as an Add-on to the G Suite Marketplace you need to deploy the changes after setting up your project on workspace.google.com

 Step 4: Follow the steps to deploy your Add-on. Click on the Deploy button > New deployment > Select type (Add-on).

You will receive a project number from your google workspace. Using it finally you can publish your add-on to Marketplace.