如何用Office JS插件在Outlook撰写窗口添加带操作按钮的通知消息

你的需求完全可以通过Office JavaScript API实现，以下是具体的实现思路和代码示例：

一、核心功能实现步骤 #

1. 监听收件人添加事件 #

在Outlook撰写窗口的初始化脚本中，通过监听RecipientsChanged事件来捕获收件人变更行为，触发通知显示逻辑：

// 撰写窗口脚本（如taskpane.js）
Office.onReady(() => {
  // 注册收件人变更监听
  Office.context.mailbox.item.addHandlerAsync(
    Office.EventType.RecipientsChanged,
    handleRecipientChange,
    (res) => {
      if (res.status !== Office.AsyncResultStatus.Succeeded) {
        console.error("监听收件人失败: " + res.error.message);
      }
    }
  );
});

function handleRecipientChange() {
  // 此处可添加逻辑判断是否为"添加收件人"操作（比如对比变更前后的收件人列表）
  // 简化处理：直接触发通知显示
  showActionNotification();
}

2. 显示带按钮的自定义通知 #

使用notificationMessages.addAsync创建包含"Add"和"Dismiss"按钮的通知，点击按钮时执行对应逻辑：

function showActionNotification() {
  const notifyId = "newRecipientAlert";
  
  // 先清除同ID的旧通知，避免重复显示
  Office.context.mailbox.item.notificationMessages.removeAsync(notifyId);

  // 创建带交互按钮的通知
  Office.context.mailbox.item.notificationMessages.addAsync(
    notifyId,
    {
      type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
      message: "检测到新收件人，是否执行添加操作？",
      icon: "Icon.16x16",
      buttons: [
        {
          text: "Add",
          action: () => {
            // 调用commands.js中的API（需提前暴露到全局）
            window.commandsApi.executeAddAction();
            // 操作完成后移除通知
            Office.context.mailbox.item.notificationMessages.removeAsync(notifyId);
          }
        },
        {
          text: "Dismiss",
          action: () => {
            Office.context.mailbox.item.notificationMessages.removeAsync(notifyId);
          }
        }
      ]
    },
    (res) => {
      if (res.status !== Office.AsyncResultStatus.Succeeded) {
        console.error("创建通知失败: " + res.error.message);
      }
    }
  );
}

3. 跨脚本调用commands.js的API #

在commands.js中将需要调用的API暴露到全局作用域，确保撰写窗口脚本可以访问：

// commands.js
window.commandsApi = {
  executeAddAction: function() {
    // 这里编写你的业务逻辑，比如调用后端接口、修改邮件内容等
    console.log("执行Add按钮对应的API操作");
    // 示例：添加附件
    // Office.context.mailbox.item.addFileAttachmentAsync("https://example.com/file.pdf", "附件.pdf");
  }
};

二、关键注意事项 #

• 插件权限：在manifest.xml中设置Permissions为ReadWriteMailbox，确保拥有监听收件人和创建通知的权限。
• 事件过滤：RecipientsChanged事件会在添加、删除、修改收件人时触发，若需仅在"添加"时触发，需对比变更前后的收件人列表。
• 资源配置：通知中使用的icon需在manifest.xml的Resources节点中提前定义对应图标资源。

内容的提问来源于stack exchange，提问作者Zia ul Qamar