GSM javascript email sender for internal use

I am working on creating a GSM add-on for users in my gsuite organization. It will add a button to the Gmail interface and when a user clicks that button, it will open a popup. The popup will have 3 text fields and a submit button, Recipient Fname, Recipient Lname, and Recipient email. When the user clicks the submit button, it will send an email to the email address specified. The content in the email is specified in a message.html file but it does include the first and last name entered in the popup. I have 3 code files so far. Can someone please tell me how to add a button to the gmail UI, and make it open a popup, and write and send the email based on the answers to the text fields in the popup. popup.html:

    <!DOCTYPE html>
<html>
  <head>
    <title>Review Published Emailer</title>
    <script src="Code.gs"></script>
  </head>
  <body>
    <form>
    <input type="text" id="readerEmail" placeholder="Reader's Email Address"><br><br>
    <input type="text" id="readerFname" placeholder="Reader's First Name"><br><br>
    <input type="text" id="readerLname" placeholder="Reader's Last Name"><br><br>
    <label>Submit</label>
    <input type="submit" id="submit" onclick="SendMail()">
    </form>
  </body>
</html>

Message.html:

<p> Email Contents</p>

Code.gs:

function SendMail() {
Gmail.Users.Messages.send('Message.html','me');
}

Revision:

I am new to Javascript and have no experience with JSON. I have been reading the documentation and it is confusing me. I opened my manifest file and read about the button and popup in the UI. I figured out that I need to make a card that opens in the Gmail compose interface. Here is what is in my manifest file right now: { "timeZone": "America/Mexico_City", "dependencies": { "enabledAdvancedServices": [{ "userSymbol": "Gmail", "serviceId": "gmail", "version": "v1" }] }, "exceptionLogging": "STACKDRIVER", "runtimeVersion": "V8" } Can someone tell me what I need to add to my manifest in order to build the card, anything else I will need to add the card, and how to send an email with the information added to the fields in the card. Thanks. REVISION 2: I have worked on the code some. I did the javascript, and am working on the JSON manifest. Here's what I have done so far:

{
  "timeZone": "America/Mexico_City",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
       "common": {
            "name": "Review Published Email Template",
            "logoUrl": "https://goodbookreviews.page/Logo.png",
            "useLocaleFromApp": true,
       },
"gmail": 
      "composeTrigger": {
        "selectActions": [{
          "text": "Insert cat",
          "runFunction": "onGmailCompose"
        }],
      }
}
}

I try to save that code, but get the error:

Unexpected character ('}' (code 125)): was expecting double-quote to start field name at [Source: (String)"{ "timeZone": "America/Mexico_City", "dependencies": { }, "exceptionLogging": "STACKDRIVER", "runtimeVersion": "V8", "addOns": { "common": { "name": "Review Published Email Template", "logoUrl": "https://goodbookreviews.page/Logo.png", "useLocaleFromApp": true, }, "gmail": "composeTrigger": { "selectActions": [{ "text": "Insert cat", "runFunction": "onGmailCompose" }], } } }"; line: 12, column: 9]

Can someone please tell me how to fix this? Thanks.

Revision 2:

There has been a small change, and I will no longer need to use the first and last name. The card will only have 1 field, the email address, and the email will not contain a first and last name. I have updated my manifest and script files and deployed from the manifest. It almost works. I can open the card from the compose window, and enter the email address and click the button, and then it adds the email to the compose window, but it does not add the email address to the recipients field. Can you please tell me how I can get the value entered in the email field in the card and add it to the recipients field? Also, how can I specify a subject to enter into the email? Not from a field in the card, but a set subject that will be the same every time. Thanks! Here's my code:

{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
    "https://www.googleapis.com/auth/calendar.addons.execute",
    "https://www.googleapis.com/auth/gmail.addons.current.action.compose",
    "https://www.googleapis.com/auth/gmail.addons.current.message.readonly",
    "https://www.googleapis.com/auth/gmail.addons.execute",
    "https://www.googleapis.com/auth/script.locale"],
  "runtimeVersion": "DEPRECATED_ES5",
  "addOns": {
    "common": {
      "name": "Review Published Email Template",
      "logoUrl": "https://goodbookreviews.page/Logo.png",
      "useLocaleFromApp": true,
      "universalActions": [{
        "label": "Book Review ",
        "openLink": "https://www.goodbookreviews.page"
      }]
    },
    "gmail": {
      "contextualTriggers": [{
        "unconditional": {
        },
        "onTriggerFunction": "onGmailMessage"
      }],
      "composeTrigger": {
        "selectActions": [{
          "text": "Use Template",
          "runFunction": "onGmailCompose"
        }],
        "draftAccess": "NONE"
      }
    }
  }
}

Code.gs:

function onGmailCompose(e) {
  console.log(e);
  var header = CardService.newCardHeader()
      .setTitle('Use Template')
      .setSubtitle('Use the template for sending an email after a review has been published.');
  // Create text input for entering the cat's message.
  var input = CardService.newTextInput()
      .setFieldName('text')
      .setTitle('Email')
      .setHint('What is the readers email address?');
  // Create a button that inserts the cat image when pressed.
  var action = CardService.newAction()
      .setFunctionName('useTemplate');
  var button = CardService.newTextButton()
      .setText('Use Template')
      .setOnClickAction(action)
      .setTextButtonStyle(CardService.TextButtonStyle.FILLED);
  var buttonSet = CardService.newButtonSet()
      .addButton(button);
  // Assemble the widgets and return the card.
  var section = CardService.newCardSection()
      .addWidget(input)
      .addWidget(buttonSet);
  var card = CardService.newCardBuilder()
      .setHeader(header)
      .addSection(section);
  return card.build();
}
function useTemplate(e) {
  console.log(e);
  var text = e.formInput.text;
  var now = new Date();
  var htmlContent = '<p> Test, does this work?</p>';
  var response = CardService.newUpdateDraftActionResponseBuilder()
  .setUpdateDraftBodyAction(CardService.newUpdateDraftBodyAction()
                            .addUpdateContent(htmlContent, CardService.ContentType.MUTABLE_HTML)
                            .setUpdateType(CardService.UpdateDraftBodyType.IN_PLACE_INSERT))
  .build();
  return response;
}