Google App Script / Gmail add-on：如何在 Gmail 上显示带有文本和按钮的窗口？

Question

我制作了一个 Google App 脚本来自动回复我的电子邮件（一种聪明的电子邮件机器人助手）。不过，我想在发送之前检查机器人所做的每个答案。

所以我想在 Gmail 上设置一个窗口，显示用户电子邮件和机器人回答，以及两个按钮“发送”“跳过”。通过这种方式，我可以检查机器人准备的答案，然后发送或跳过它（或可能编辑它）。

如何在 GMail 上通过 Google App Script 显示带有文本、editText 和按钮的窗口？

谢谢！

问候。

Answer 1

您必须检查 Gmail 插件：https://developers.google.com/gsuite/add-ons/gmail

首先，您可以查看 Google 的 codelab，它会在 5 分钟内为您提供设置第一个插件的代码，然后您可以根据自己的需要调整它：https://codelabs.developers.google.com/codelabs/apps-script-intro/

史蒂芬

Answer 2

一个简单的解决方案是让机器人将电子邮件保存为“草稿”。这样，您可以在手动发送电子邮件之前轻松检查电子邮件。

如果您仍然对创建 gmail 插件（可以显示原始电子邮件、回复和发送或编辑按钮）感兴趣，您可能有兴趣构建 card-based interfaces。这些将显示在您的 Gmail 网络客户端的右侧，如下所示：

用于显示此类界面的代码（有两个按钮，一个用于自动发送电子邮件，另一个用于打开其上的编辑器）如下：

function buildAddOn(e) {
  // Activate temporary Gmail add-on scopes.
  var accessToken = e.messageMetadata.accessToken;
  GmailApp.setCurrentMessageAccessToken(accessToken);

  return buildDraftCard(getNextDraft());
}

function buildDraftCard(draft) {
  if (!draft) {
    var header = CardService.newCardHeader().setTitle('Nothing to see here');
    return CardService.newCardBuilder().setHeader(header).build();
  } else {
    var header = CardService.newCardHeader()
      .setTitle(draft.getMessage().getSubject());
    var section = CardService.newCardSection();
    var messageViewer = CardService.newTextParagraph()
      .setText(draft.getMessage().getBody());
    var sendButton = CardService.newTextButton()
      .setText('Send')
      .setOnClickAction(CardService.newAction()
                        .setFunctionName('sendMessage')
                        .setParameters({'draftId': draft.getId()})
                       );
    var editButton = CardService.newTextButton()
      .setText('Edit')
      .setOnClickAction(CardService.newAction()
                        .setFunctionName('editMessage')
                        .setParameters({'draftId': draft.getId()})
                       );
    var buttonSet = CardService.newButtonSet()
      .addButton(sendButton)
      .addButton(editButton);

    section.addWidget(messageViewer);
    section.addWidget(buttonSet)

    return CardService.newCardBuilder()
    .setHeader(header)
    .addSection(section)
    .build();
  }
}

function sendMessage(e) {
  GmailApp.getDraft(e.parameters.draftId).send();
  return CardService.newActionResponseBuilder().setNavigation(
    CardService.newNavigation()
    .popToRoot()
    .updateCard(buildDraftCard(getNextDraft()))
  ).build(); 
}

function editMessage(e) {
  var messageId = GmailApp.getDraft(e.parameters.draftId).getMessageId();
  var link = "https://mail.google.com/mail/#all/" + messageId;
  return CardService.newActionResponseBuilder().setOpenLink(
    CardService.newOpenLink()
    .setUrl(link)
    .setOnClose(CardService.OnClose.RELOAD_ADD_ON)
  ).build();
}

function getNextDraft() {
  return GmailApp.getDrafts().pop()
}

appsscript.json 配置如下：

{
  "oauthScopes": [ 
    "https://www.googleapis.com/auth/gmail.addons.execute",        
    "https://mail.google.com/"
  ],
  "gmail": {
    "name": "Gmail Add-on Draft Autoresponse UI",
    "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/label_googblue_24dp.png",
    "contextualTriggers": [{
      "unconditional": {
      },
      "onTriggerFunction": "buildAddOn"
    }],
    "openLinkUrlPrefixes": [
      "https://mail.google.com/"
    ],
    "primaryColor": "#4285F4",
    "secondaryColor": "#4285F4"
  }
}

但请记住，目前这些接口仍有一些限制。它们只能在打开消息时显示，并且电子邮件的 HTML 格式可能看起来有点不对劲。您可以关注this link，了解有关如何测试和运行上述代码的更多信息。