Gmail插件开发：实时向草稿追加文本/HTML及场景适配问题

我来帮你搞定Gmail插件里实时追加内容到已打开草稿的问题！咱们一步步来拆解解决：

你之前遇到的后台更新草稿但前端不实时显示的问题，本质是Gmail前端编辑会话和后台草稿数据不同步——直接通过API修改后台草稿，只会更新服务器端数据，而用户当前打开的编辑器还停留在本地缓存的状态，自然看不到变化。解决的关键是：针对已打开的草稿，直接操作前端编辑器插入内容，而非只改后台数据。

1. 先判断当前是否有活跃的草稿编辑窗口 #

当用户点击LINK按钮时，先在客户端检查用户是否正在编辑草稿（或新邮件）。我们可以用Gmail提供的Compose API来做这件事：

// 客户端脚本（直接在插件卡片的按钮动作中调用）
function handleLinkClick() {
  // 获取当前撰写状态
  gmail.compose.getComposeState()
    .then(state => {
      // 状态为draft（编辑已有草稿）或new（新建邮件），说明有活跃编辑窗口
      if (['draft', 'new'].includes(state.composeType)) {
        // 直接往编辑器插内容
        insertContentToComposer();
      } else {
        // 没有活跃窗口，调用服务器端函数创建带链接的新草稿
        google.script.run.createNewDraftWithLink();
      }
    })
    .catch(err => {
      console.error('检查撰写状态失败:', err);
    });
}

2. 实时向活跃编辑器插入内容 #

如果检测到有打开的编辑窗口，直接用Compose API把内容插入到编辑器里——这样内容会实时显示，同时Gmail会自动同步到后台草稿，完美解决你之前的同步问题：

function insertContentToComposer() {
  // 准备要插入的链接内容（文本或HTML都支持）
  const linkText = '目标链接';
  const linkHtml = `<a href="https://your-target-url.com">${linkText}</a>`;

  // 插入HTML格式的链接（如果要插纯文本，用insertText方法）
  gmail.compose.insertHtml(linkHtml)
    .then(() => {
      console.log('链接已成功插入到编辑器');
    })
    .catch(err => {
      console.error('插入内容失败:', err);
    });
}

3. 服务器端创建新草稿（补充完善你的现有逻辑） #

如果没有活跃编辑窗口，就调用服务器端代码创建带链接的新草稿，还可以直接打开它让用户继续编辑：

// 服务器端Apps Script代码
function createNewDraftWithLink() {
  const linkHtml = '<a href="https://your-target-url.com">目标链接</a>';
  // 创建新草稿
  const draft = GmailApp.createDraft('', '', '', {
    htmlBody: linkHtml
  });
  // 直接打开这个草稿，用户可以立刻编辑
  GmailApp.openDraft(draft.getId());
}

要让Compose API正常工作，必须在插件的appsscript.json配置文件里添加权限和触发器：

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/gmail.addons.execute",
    "https://www.googleapis.com/auth/gmail.compose"
  ],
  "gmail": {
    "name": "你的Gmail插件名称",
    "logoUrl": "https://your-logo-url.com/logo.png",
    "contextualTriggers": [
      {
        "unconditional": {},
        "onTriggerFunction": "buildAddOn"
      }
    ],
    "composeTrigger": {
      "selectActions": [
        {
          "text": "插入链接",
          "runFunction": "handleLinkClick"
        }
      ],
      "draftAccess": "WRITE"
    }
  }
}

• 当用户没打开草稿时：点击LINK按钮会直接创建带链接的新草稿并打开编辑窗口
• 当用户正在编辑草稿时：点击按钮会实时把链接插入到当前编辑器的光标位置，内容立刻可见，且自动同步到后台草稿

内容的提问来源于stack exchange，提问作者Mohammed AlBanna