如何用Yeoman生成器+JS开发Outlook发送时自定义对话框加载项？

一、用Yeoman生成Outlook加载项项目 #

• 先安装依赖工具：

  npm install -g yo generator-office
  

• 运行生成命令创建项目：

  yo office
  

  按提示选择：
  • 项目类型：Outlook Add-in
  • 开发框架：JavaScript
  • 输入项目名称（比如OutlookCustomOnSendAddin）
• 生成完成后进入项目目录：

  cd OutlookCustomOnSendAddin
  

二、修改manifest.xml配置OnSend事件 #

找到项目中的manifest.xml，替换原有LaunchEvent相关配置为以下内容（核心是把SendMode改成Block，完全接管发送流程）：

<ExtensionPoint xsi:type="LaunchEvent">
  <LaunchEvents>
    <LaunchEvent Type="OnMessageSend" FunctionName="onMessageSendHandler" SendMode="Block"/>
  </LaunchEvents>
  <SourceLocation resid="WebViewRuntime.Url"/>
</ExtensionPoint>

说明：SendMode="Block"会阻止Outlook默认发送逻辑，让我们的代码完全控制后续流程，这是实现自定义弹窗的关键。

三、实现自定义弹窗与交互逻辑 #

1. 主加载项处理逻辑（src/commands/commands.js） #

替换或添加以下代码，实现发送事件监听、弹窗调用和用户操作处理：

async function onMessageSendHandler(event) {
  try {
    // 弹出自定义对话框，路径指向我们要创建的弹窗页面
    Office.context.ui.displayDialogAsync(
      `${window.location.origin}/custom-dialog.html`,
      { height: 30, width: 40, displayInIframe: true },
      (asyncResult) => {
        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
          // 弹窗加载失败，取消发送并提示
          event.completed({ allowEvent: false });
          Office.context.mailbox.item.notificationMessages.addAsync('sendError', {
            type: 'errorMessage',
            message: '自定义弹窗加载失败，请重试'
          });
          return;
        }

        const dialog = asyncResult.value;
        // 监听对话框传回的用户操作消息
        dialog.addEventHandler(Office.EventType.DialogMessageReceived, (args) => {
          dialog.close();
          // 根据用户操作决定是否允许发送，同时可收集操作数据
          const userAction = args.message;
          if (userAction === 'confirm') {
            // 这里可以把用户操作数据上报到后端或本地存储
            console.log('用户确认发送邮件');
            event.completed({ allowEvent: true });
          } else {
            console.log('用户取消发送邮件');
            event.completed({ allowEvent: false });
          }
        });

        // 监听对话框关闭事件（用户直接关闭弹窗）
        dialog.addEventHandler(Office.EventType.DialogEventReceived, () => {
          // 用户关闭弹窗，默认取消发送
          event.completed({ allowEvent: false });
        });
      }
    );
  } catch (error) {
    console.error('处理发送事件出错:', error);
    event.completed({ allowEvent: false });
  }
}

// 注册函数，让Office能识别调用
Office.actions.associate("onMessageSendHandler", onMessageSendHandler);

2. 自定义弹窗页面（public/custom-dialog.html） #

在项目public目录下创建该文件，完全自定义样式和内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发送确认</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      text-align: center;
    }
    .dialog-content {
      margin: 20px 0;
    }
    .btn-group {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 30px;
    }
    button {
      padding: 10px 25px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    .confirm-btn {
      background-color: #0078d4;
      color: white;
    }
    .cancel-btn {
      background-color: #f0f0f0;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="dialog-content">
    <h3>确认发送这封邮件？</h3>
    <p>点击「确认发送」将立即投递，点击「取消」将终止发送流程。</p>
  </div>
  <div class="btn-group">
    <button class="confirm-btn" onclick="sendAction('confirm')">确认发送</button>
    <button class="cancel-btn" onclick="sendAction('cancel')">取消</button>
  </div>

  <script>
    // 向主加载项传递用户操作结果
    function sendAction(action) {
      Office.context.ui.messageParent(action);
    }
  </script>
</body>
</html>

四、测试加载项 #

• 启动本地开发服务：

  npm start
  

• 按照Outlook加载项测试流程，将manifest.xml加载到Outlook（网页版或桌面版均可）
• 新建邮件点击发送，即可看到自定义弹窗；操作后可在控制台查看用户操作日志，也可将日志上报到后端实现数据收集。

关键注意点 #

• 你之前使用的SendMode="PromptUser"会触发Outlook默认提示框，样式和逻辑无法自定义，必须换成Block模式才能完全接管发送流程。
• 自定义弹窗通过Office.context.ui.displayDialogAsync实现，弹窗页面完全由你控制，样式和交互可以自由定制。
• 通过DialogMessageReceived事件接收用户操作，再调用event.completed({ allowEvent: true/false })决定是否允许发送，同时可在该环节完成用户操作数据的收集。

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