如何在Google App Script中无刷新加载Gmail草稿？

问题背景 #

使用GAS开发Google Workspace应用时，通过https://mail.google.com/mail/u/0/#drafts?compose=<draft-id>链接打开草稿会触发页面全刷新，而Gmail原生点击草稿是弹窗无刷新打开，需要找到替代方案。

可行解决方案 #

方案1：修改链接参数+Overlay弹窗 #

通过调整Gmail的链接格式，并使用GAS的OpenAs.OVERLAY属性，实现不刷新页面的弹窗打开草稿。

修改后的代码片段

function handleViewDraft(e) {
    var selectedDraftId = e.formInput.selectedDraft;
    var draftUrl = selectedDraftId 
        ? "https://mail.google.com/mail/u/0/?view=cm&draftid=" + selectedDraftId 
        : "https://mail.google.com/mail/u/0/#drafts";

    Logger.log("Draft URL: " + draftUrl);

    var openDraftLink = CardService.newOpenLink()
        .setUrl(draftUrl)
        .setOpenAs(CardService.OpenAs.OVERLAY); // 改为弹窗打开，而非全页面刷新

    var openDraftButton = CardService.newTextButton()
        .setText("打开草稿")
        .setOpenLink(openDraftLink);

    var card = CardService.newCardBuilder()
        .setName("打开草稿")
        .addSection(CardService.newCardSection()
            .addWidget(CardService.newTextParagraph().setText("点击下方按钮打开草稿。"))
            .addWidget(openDraftButton))
        .build();

    return [card];
}

说明

• 链接参数view=cm会触发Gmail的弹窗式编辑界面，而非全页面跳转
• setOpenAs(CardService.OpenAs.OVERLAY)会在当前页面的浮动弹窗中打开链接，避免整体页面刷新
• 该方案无需额外授权，实现简单，但依赖Gmail网页版的URL格式，未来可能存在变动风险

方案2：HtmlService弹窗+Gmail API调用 #

如果需要更贴近原生的体验，可以通过HtmlService创建弹窗，结合Gmail API获取草稿信息后触发原生编辑界面。

步骤1：修改GAS函数

function handleViewDraft(e) {
    var selectedDraftId = e.formInput.selectedDraft;
    if (!selectedDraftId) {
        return [CardService.newCardBuilder()
            .addSection(CardService.newCardSection()
                .addWidget(CardService.newTextParagraph().setText("请先选择一个草稿。")))
            .build()];
    }

    // 创建包含草稿ID的Html弹窗
    var htmlOutput = HtmlService.createTemplateFromFile('DraftViewer')
        .evaluate()
        .setWidth(800)
        .setHeight(600);

    // 返回弹窗响应（仅适用于Google Workspace插件）
    return CardService.newActionResponseBuilder()
        .setDialog(CardService.newDialog()
            .setTitle("编辑草稿")
            .setContent(htmlOutput.getContent())
            .setWidth(800)
            .setHeight(600))
        .build();
}

步骤2：创建DraftViewer.html文件

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
    <div style="padding: 20px; text-align: center;">
        <button onclick="openNativeDraft()" style="padding: 10px 20px; font-size: 16px;">打开原生草稿编辑界面</button>
    </div>

    <script>
        // 从模板获取草稿ID
        const draftId = "<?= selectedDraftId ?>";

        async function openNativeDraft() {
            // 初始化Gmail API客户端
            await gapi.client.init({
                discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"],
                scope: "https://www.googleapis.com/auth/gmail.compose"
            });

            // 获取草稿信息（可选，用于验证草稿存在）
            const draft = await gapi.client.gmail.users.drafts.get({
                userId: "me",
                id: draftId
            });

            // 触发Gmail原生弹窗编辑
            window.open(`https://mail.google.com/mail/u/0/?view=cm&draftid=${draftId}`, "_blank", "width=900,height=700,modal=yes,alwaysRaised=yes");
            // 关闭当前弹窗
            google.script.host.close();
        }

        // 加载API客户端
        gapi.load('client', () => {
            // 自动授权（如果未授权会弹出授权窗口）
            gapi.auth2.getAuthInstance().signIn();
        });
    </script>
</body>
</html>

说明

• 需要在Google Cloud Console中启用Gmail API，并为脚本配置OAuth授权
• 用户首次使用时需要授权Gmail访问权限
• 该方案体验更接近Gmail原生操作，但实现相对复杂

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