如何创建显示在邮件正文上方的Outlook 365 Web加载项？

嘿，我来帮你搞定这个问题！要让加载项按钮出现在邮件正文上方，你确实需要用到上下文加载项，但核心是要正确配置清单文件里的扩展点规则和位置——这可能就是你之前用官方示例没实现效果的原因。

核心思路 #

要让按钮显示在邮件正文上方（不管是阅读还是撰写场景），关键是把加载项的命令组放在Outlook默认的工具栏（TabDefault）里，而不是单独的“加载项”选项卡。如果需要上下文触发（比如选中正文内容才显示按钮），还要添加对应的规则配置。

完整的配置示例 #

下面是一个可直接复用的清单（manifest.xml）核心片段，包含阅读和撰写场景的配置：

1. 资源配置（先定义按钮的文本、图标和面板链接）

<Resources>
  <bt:Images>
    <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
    <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
    <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
  </bt:Images>
  <bt:Urls>
    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
  </bt:Urls>
  <bt:ShortStrings>
    <bt:String id="GroupLabel" DefaultValue="我的邮件工具"/>
    <bt:String id="TaskpaneButtonLabel" DefaultValue="打开工具面板"/>
    <bt:String id="TaskpaneButtonTitle" DefaultValue="打开自定义邮件处理面板"/>
  </bt:ShortStrings>
  <bt:LongStrings>
    <bt:String id="TaskpaneButtonDesc" DefaultValue="点击后打开面板，可对当前邮件内容进行编辑或分析"/>
  </bt:LongStrings>
</Resources>

2. 扩展点配置（实现按钮在正文上方显示）

<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
    <Requirements>
      <bt:Sets DefaultMinVersion="1.1">
        <bt:Set Name="Mailbox" MinVersion="1.1"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <!-- 邮件阅读场景：按钮出现在已读邮件正文上方 -->
        <DesktopFormFactor>
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <OfficeTab id="TabDefault">
              <!-- 定义加载项的命令组 -->
              <Group id="msgReadGroup">
                <Label resid="GroupLabel"/>
                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                  <Label resid="TaskpaneButtonLabel"/>
                  <Supertip>
                    <Title resid="TaskpaneButtonTitle"/>
                    <Description resid="TaskpaneButtonDesc"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                  <!-- 上下文触发规则：选中邮件正文内容时显示按钮 -->
                  <Rule xsi:type="ItemHasSelection" ItemType="Message"/>
                </Control>
              </Group>
              <!-- 把命令组放在「回复」按钮之后，确保在正文上方工具栏 -->
              <OverridePoints>
                <OverridePoint xsi:type="GroupOverride" GroupId="msgReadGroup" InsertAfter="GroupMailReply"/>
              </OverridePoints>
            </OfficeTab>
          </ExtensionPoint>

          <!-- 邮件撰写场景：按钮出现在新建邮件正文上方 -->
          <ExtensionPoint xsi:type="MessageComposeCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="msgComposeGroup">
                <Label resid="GroupLabel"/>
                <Control xsi:type="Button" id="msgComposeOpenPaneButton">
                  <Label resid="TaskpaneButtonLabel"/>
                  <Supertip>
                    <Title resid="TaskpaneButtonTitle"/>
                    <Description resid="TaskpaneButtonDesc"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                </Control>
              </Group>
              <OverridePoints>
                <OverridePoint xsi:type="GroupOverride" GroupId="msgComposeGroup" InsertAfter="GroupMailReply"/>
              </OverridePoints>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
  </VersionOverrides>
</VersionOverrides>

关键配置说明 #

• TabDefault：指定加载项按钮放在Outlook默认的邮件工具栏（就是有回复、转发按钮的那一排），这样按钮自然就出现在正文上方。
• InsertAfter="GroupMailReply"：控制按钮的位置，把你的加载项放在「回复」按钮之后，确保在用户视觉焦点的正文上方区域。
• 上下文规则ItemHasSelection：只有当用户选中邮件正文里的内容时，按钮才会显示；如果想让按钮始终显示，直接删除这个<Rule>标签即可。
• MessageReadCommandSurface/MessageComposeCommandSurface：分别对应邮件阅读和撰写场景，按需选择配置。

测试步骤 #

1. 用Yeoman生成Outlook加载项项目：运行yo office，选择「Outlook Add-in」，按照提示创建项目。
2. 替换项目里的manifest.xml文件为上面的配置（注意替换图标和面板的URL为你自己的资源地址）。
3. 运行npm start，会自动打开Outlook网页版并加载你的加载项，测试按钮是否出现在正文上方。
4. 桌面版Outlook测试：通过「加载项」→「我的加载项」→「自定义加载项」上传你的manifest.xml即可。

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