Google 应用程序脚本/Gmail 附加组件：如何在 Gmail 上显示带有文本和按钮的 window？

Question

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

所以我想在 Gmail 上有一个 window 显示用户电子邮件和机器人答案，以及两个按钮 "send" "skip"。通过这种方式，我可以检查机器人准备的答案并发送或跳过（或可能编辑）。

如何通过 Google 应用程序脚本在 GMail 上显示带有文本、editText 和按钮的 window？

谢谢！

此致。

Answer 1

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

对于初次入门，您可以查看 Google 中的代码实验室，它会在 5 分钟内为您提供设置第一个附加组件的代码，然后您可以根据自己的需要对其进行调整：https://codelabs.developers.google.com/codelabs/apps-script-intro/

史蒂芬

Answer 2

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

如果您仍然对创建 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.

找到有关如何测试和运行上述代码的更多信息

Google 应用程序脚本/Gmail 附加组件：如何在 Gmail 上显示带有文本和按钮的 window？

Google App Script / Gmail add-on : How to display a window with text and buttons over Gmail?

google-app-engine

google-apps

google-apps-script

gmail-api

gmail-addons