Office 365网页版Word插件项目中添加自定义选项卡的技术问询

嗨，我完全懂你的困扰——网页版Office插件的自定义选项卡相关示例确实不像VSTO那样一搜一大把，而且有些文档要么没给出完整代码，要么更新不及时，很容易让人摸不着头脑。不过可以明确告诉你：Office 365网页版Word的Web插件完全支持添加自定义选项卡，下面我给你一套完整的配置示例和操作说明，帮你快速实现。

核心原理说明 #

和VSTO用代码生成功能区不同，网页版Office插件的自定义选项卡是通过**清单文件（manifest.xml 或 manifest.json）**来声明配置的，这是Web插件的核心配置入口，所有功能区的自定义都在这里定义。

完整配置示例（XML格式清单） #

下面是一个包含自定义选项卡、功能组、按钮和下拉菜单的完整manifest片段，你可以直接放到自己的插件清单里调整：

<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
          xsi:type="TaskPaneApp">
  <!-- 省略插件基础配置：ID、名称、版本、提供商信息等 -->
  
  <Hosts>
    <Host Name="Document"/> <!-- 指定适配Word文档 -->
  </Hosts>

  <DefaultSettings>
    <SourceLocation DefaultValue="https://你的插件域名/taskpane.html"/>
  </DefaultSettings>

  <!-- 重点：自定义选项卡的版本覆盖配置 -->
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Document">
        <DesktopFormFactor>
          <!-- 自定义选项卡扩展点 -->
          <ExtensionPoint xsi:type="CustomTab">
            <CustomTab id="MyCustomTab">
              <!-- 选项卡显示名称 -->
              <Label resid="CustomTab.Label"/>
              <!-- 选项卡内的功能组 -->
              <Group id="MyToolsGroup">
                <Label resid="CustomGroup.Label"/>
                <!-- 组内的按钮控件 -->
                <Control xsi:type="Button" id="OpenTaskPaneBtn">
                  <Label resid="OpenBtn.Label"/>
                  <Supertip>
                    <Title resid="OpenBtn.Title"/>
                    <Description resid="OpenBtn.Desc"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16"/>
                    <bt:Image size="32" resid="Icon.32"/>
                    <bt:Image size="80" resid="Icon.80"/>
                  </Icon>
                  <!-- 按钮点击触发的函数 -->
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>showCustomTaskPane</FunctionName>
                  </Action>
                </Control>
                <!-- 组内的下拉菜单控件 -->
                <Control xsi:type="Menu" id="MyCustomMenu">
                  <Label resid="Menu.Label"/>
                  <Supertip>
                    <Title resid="Menu.Title"/>
                    <Description resid="Menu.Desc"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16"/>
                    <bt:Image size="32" resid="Icon.32"/>
                    <bt:Image size="80" resid="Icon.80"/>
                  </Icon>
                  <!-- 菜单内的选项 -->
                  <Items>
                    <Item id="MenuOption1">
                      <Label resid="MenuOpt1.Label"/>
                      <Action xsi:type="ExecuteFunction">
                        <FunctionName>runOption1</FunctionName>
                      </Action>
                    </Item>
                    <Item id="MenuOption2">
                      <Label resid="MenuOpt2.Label"/>
                      <Action xsi:type="ExecuteFunction">
                        <FunctionName>runOption2</FunctionName>
                      </Action>
                    </Item>
                  </Items>
                </Control>
              </Group>
              <!-- 指定选项卡位置：放在Word自带的"开始"选项卡之后 -->
              <InsertAfterMso>TabHome</InsertAfterMso>
            </CustomTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>

    <!-- 资源字符串与图标定义 -->
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16" DefaultValue="https://你的插件域名/images/icon-16.png"/>
        <bt:Image id="Icon.32" DefaultValue="https://你的插件域名/images/icon-32.png"/>
        <bt:Image id="Icon.80" DefaultValue="https://你的插件域名/images/icon-80.png"/>
      </bt:Images>
      <bt:ShortStrings>
        <bt:String id="CustomTab.Label" DefaultValue="我的自定义选项卡"/>
        <bt:String id="CustomGroup.Label" DefaultValue="我的工具组"/>
        <bt:String id="OpenBtn.Label" DefaultValue="打开任务窗格"/>
        <bt:String id="OpenBtn.Title" DefaultValue="打开自定义任务窗格"/>
        <bt:String id="Menu.Label" DefaultValue="我的菜单"/>
        <bt:String id="Menu.Title" DefaultValue="多功能菜单"/>
        <bt:String id="MenuOpt1.Label" DefaultValue="插入文本"/>
        <bt:String id="MenuOpt2.Label" DefaultValue="格式化内容"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="OpenBtn.Desc" DefaultValue="点击打开专属任务窗格进行操作"/>
        <bt:String id="Menu.Desc" DefaultValue="选择不同选项执行对应功能"/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

前端函数实现 #

在你的插件JS文件（比如taskpane.js）里，需要定义清单中指定的函数，比如：

// 打开自定义任务窗格的函数
function showCustomTaskPane() {
  Office.context.ui.displayDialogAsync('https://你的插件域名/taskpane.html', {
    height: 60,
    width: 40
  }, function(result) {
    if (result.error) {
      console.error('打开任务窗格失败:', result.error.message);
    }
  });
}

// 菜单选项1：插入文本
function runOption1() {
  Word.run(async (context) => {
    const body = context.document.body;
    body.insertParagraph('你执行了"插入文本"操作', Word.InsertLocation.end);
    await context.sync();
  }).catch((error) => {
    console.error('操作失败:', error);
  });
}

// 菜单选项2：格式化内容
function runOption2() {
  Word.run(async (context) => {
    const selectedText = context.document.getSelection();
    selectedText.font.color = '#FF0000';
    selectedText.font.bold = true;
    await context.sync();
  }).catch((error) => {
    console.error('格式化失败:', error);
  });
}

测试与验证 #

1. 确保你的插件运行在HTTPS服务器上（本地开发可以用Yeoman生成的Office插件模板自带的本地HTTPS服务）
2. 将修改后的manifest文件上传到Office插件测试平台，或者用本地加载方式导入插件
3. 打开网页版Word，就能在功能区看到你定义的自定义选项卡了

关于你之前的困惑 #

你找不到合适示例的原因主要有两个：一是很多入门教程都聚焦在任务窗格的基础功能，忽略了功能区自定义；二是微软的文档示例比较分散，而且部分旧仓库的示例其实是有效的——因为manifest的核心语法这些年没有大的变化，只是新增了一些属性。

备注：内容来源于stack exchange，提问作者strider