Office Word Add-In问题：ExecuteFunction触发后显示commands.html而非执行函数

我是Office Add-ins新手，可能犯了低级错误。我创建了一个TypeScript React Add-in的上下文菜单扩展点，点击该菜单本应运行自定义函数getButton()（当前仅在控制台打印字符串"berry !"）。但实际点击后，会弹出一个小型开发者窗口并显示commands.html文件的body标签内容，且日志输出在该窗口的控制台中。我希望不弹出这个开发者窗口，而是将日志输出到任务窗格的控制台中。请问我哪里出错了？

相关代码 #

manifest.xml #

<FunctionFile resid="Commands.Url" />
<!-- other stuff -->
<ExtensionPoint xsi:type="ContextMenu">
  <OfficeMenu id="ContextMenuText">
    <Control xsi:type="Menu" id="TestMenu2">
      <Label resid="residLabel" />
      <Supertip>
        <Title resid="residLabel" />
        <Description resid="residToolTip" />
      </Supertip>
      <Icon>
        <bt:Image size="16" resid="Icon.16x16" />
        <bt:Image size="32" resid="Icon.32x32" />
        <bt:Image size="80" resid="Icon.80x80" />
      </Icon>
      <Items>
        <Item id="showGallery2">
          <Label resid="residLabel"/>
          <Supertip>
            <Title resid="residLabel" />
            <Description resid="residToolTip" />
          </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="ExecuteFunction">
            <FunctionName>getButton</FunctionName>
          </Action>
        </Item>
      </Items>
    </Control>
  </OfficeMenu>
</ExtensionPoint>

<!-- other stuff -->
<bt:Urls>
  <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html" />
  <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
</bt:Urls>

commands.html #

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
    <script>
        Office.onReady( () => {
          Office.actions.associate("getButton", getButton);    
        });

        function getButton(event) {
            console.log("berry !");
            event.completed();
        }
    </script>
</head>

<body>
    Commands HTML File body.
</body>

</html>

实际现象 #

调用函数时，会弹出显示commands.html body标签内容的开发者窗口。

问题原因及解决方法 #

原因 #

弹出的窗口是命令函数的调试窗口，这是开发模式下的默认行为——ExecuteFunction类型的动作默认运行在独立的命令上下文（对应commands.html的进程）中，和任务窗格上下文完全分离，所以日志只会输出到它自己的调试窗口。

解决步骤 #

1. 关闭调试窗口自动弹出
   开发环境下这个窗口是默认显示的，要避免弹出，只需把commands.html的<body>内容清空或隐藏：

   <body style="display: none;"></body>
   

   生产环境下这个窗口不会自动显示，无需额外处理。

2. 将日志输出到任务窗格控制台
   命令上下文和任务窗格是独立进程，需要通过Office API的消息机制实现通信：

   • 在任务窗格代码中注册消息接收器（以TypeScript React为例，修改taskpane.tsx）：

     Office.onReady(() => {
       // 注册消息接收处理器
       Office.context.ui.addHandlerAsync(Office.EventType.DialogMessageReceived, (args) => {
         console.log(args.message); // 接收命令函数发来的日志并打印在任务窗格控制台
       });
     });
     

   • 修改commands.html的getButton函数，向任务窗格发送消息：

     function getButton(event) {
       // 发送日志内容到任务窗格
       Office.context.ui.sendMessage("berry !", (result) => {
         if (result.status === Office.AsyncResultStatus.Failed) {
           console.error(result.error.message);
         }
       });
       event.completed();
     }
     

   • 注意：任务窗格必须处于打开状态才能接收消息，如果需要强制打开任务窗格，可以在命令函数中添加打开逻辑：

     function getButton(event) {
       // 打开任务窗格
       Office.context.ui.displayDialogAsync(Office.context.settings.displayURL, { height: 60, width: 30 }, (dialogResult) => {
         const dialog = dialogResult.value;
         // 向任务窗格发送日志
         dialog.postMessage("berry !");
       });
       event.completed();
     }
     

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