Office-Js扩展：修改Manifest添加自定义按钮后加载崩溃求助

问题概述 #

使用Visual Studio 2022的「Excel Web Add-in」模板创建插件后，在Manifest中添加自定义按钮（ExecuteFunction类型）后，Excel加载插件时崩溃，重置Manifest为初始状态则恢复正常。同时疑问是否与使用Blazor Web App有关，以及如何正确添加自定义选项卡/按钮。

可能的问题点及修复步骤 #

1. 按钮图标尺寸不完整（必现问题） #

Office要求功能区按钮的图标必须包含16x16、32x32、80x80三种尺寸，缺少任意一种都会导致加载失败。你的自定义按钮只配置了32px尺寸，需补全：

<Control xsi:type='Button' id='DOGS.Button'>
    <Label resid='DOGS.GROUP.ID.LABEL'/>
    <Supertip>
        <Title resid='DOGS.GROUP.ID.LABEL'/>
        <Description resid='DOGS.GROUP.ID.DESCRIPTION'/> <!-- 建议单独用LongString资源 -->
    </Supertip>
    <Icon>
        <bt:Image size='16' resid='Contoso.tpicon_16x16' />
        <bt:Image size='32' resid='Contoso.tpicon_32x32' />
        <bt:Image size='80' resid='Contoso.tpicon_80x80' />
    </Icon>
    <Action xsi:type='ExecuteFunction'>
        <FunctionName>helloworld</FunctionName>
    </Action>
</Control>

2. 资源ID未正确定义 #

确保所有resid对应的资源在Manifest的<Resources>节点中存在：

• 按钮标签DOGS.GROUP.ID.LABEL属于ShortString，需在<bt:ShortStrings>中定义：

<bt:ShortStrings>
    <bt:String id="DOGS.GROUP.ID.LABEL" DefaultValue="我的自定义按钮" />
    <bt:String id="Contoso.CustomTab.Label" DefaultValue="我的自定义选项卡" /> <!-- 如果加自定义选项卡需要 -->
</bt:ShortStrings>

• 描述文本需用LongString，需在<bt:LongStrings>中定义：

<bt:LongStrings>
    <bt:String id="DOGS.GROUP.ID.DESCRIPTION" DefaultValue="点击执行自定义逻辑" />
</bt:LongStrings>

3. ExecuteFunction函数未正确注册（Blazor场景关键问题） #

Blazor Web App作为Office Add-in时，不能直接调用Blazor组件内的方法作为ExecuteFunction的目标，必须通过独立的JS文件（FunctionFile）暴露函数：

1. 在wwwroot目录下创建function-file.js，编写目标函数并调用event.completed()告知Office操作完成：

function helloworld(event) {
    // 示例逻辑：显示弹窗或调用Blazor方法
    Office.context.ui.displayDialogAsync(window.location.origin + "/hello", 
        { height: 200, width: 300 }, 
        function (result) {
            event.completed(); // 必须调用，否则Office会判定操作超时
        }
    );
}

2. 在Manifest的<Resources>中添加FunctionFile的URL：

<bt:Urls>
    <bt:Url id="Contoso.FunctionFile.Url" DefaultValue="https://localhost:5001/function-file.js" /> <!-- 替换为你的实际地址 -->
</bt:Urls>

3. 在<VersionOverrides> -> <Hosts> -> <Host> -> <DesktopFormFactor>下添加FunctionFile引用：

<DesktopFormFactor>
    <FunctionFile resid="Contoso.FunctionFile.Url" />
    <!-- 你的ExtensionPoint节点放在这里 -->
</DesktopFormFactor>

4. 正确添加自定义选项卡 #

如果需要创建独立的自定义选项卡，替换原有的<OfficeTab>为<CustomTab>即可：

<ExtensionPoint xsi:type='PrimaryCommandSurface'>
    <CustomTab id="Contoso.CustomTab">
        <Label resid="Contoso.CustomTab.Label" /> <!-- 对应Resources中的ShortString -->
        <Group id='Contoso.Group1'>
            <Label resid='Contoso.Group1Label' />
            <Icon>
                <bt:Image size='16' resid='Contoso.tpicon_16x16' />
                <bt:Image size='32' resid='Contoso.tpicon_32x32' />
                <bt:Image size='80' resid='Contoso.tpicon_80x80' />
            </Icon>
            <!-- 你的按钮控件放在这里 -->
        </Group>
    </CustomTab>
</ExtensionPoint>

关于Blazor的关联说明 #

是的，问题和Blazor直接相关：Blazor的运行时环境和普通Office JS Add-in不同，无法直接将Blazor组件方法暴露给Office的ExecuteFunction机制，必须通过独立的JS文件作为中间层，这是Blazor开发Office Add-in的典型注意事项。

验证步骤 #

1. 右键Manifest文件，选择「Validate Office Add-in」检查配置合法性。
2. 确保本地开发服务器正常运行，所有资源URL可访问。
3. 重启Excel，重新加载插件测试。

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