Office Word Add-In ExecuteFunction displaying commands.html instead of running the function

Question

I'm new to Office Add-ins so this might be a trivial mistake. For this Typescript React Add-in I have created a Context Menu Extension Point that on click is supposed to run a custom function getButton(), which for now just console.logs a simple string ("berry !"). However instead of doing that, upon click it opens up a small Developer Window and displays the body tag of the commands.html file. When I rightclick that window and look at the console of it, that's where I see my function print the test-string. I want that Developer Window not to open at all instead, and log the string inside taskpane console.

What am I doing wrong?

manifest.xml




  
    
      
      
        
        <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>

</code></pre>
<p><strong>manifest.xml</strong></p>
<pre><code class="lang-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>
</code></pre>
<p><strong>What happens when I call the function: Developer Window pops up with the content of the commands.html body tag</strong></p>
<p><img src="https://learn-attachment.microsoft.com/api/attachments/c7ff753f-7cab-4667-864e-33306a5ad445?platform=QnA" alt="Screenshot 2025-02-04 at 21.29.26" /></p>
<p><img src="https://learn-attachment.microsoft.com/api/attachments/1a53a584-0afe-43c9-9849-221afee9d50f?platform=QnA" alt="Screenshot 2025-02-04 at 21.29.57" /></p>

Share via

Office Word Add-In ExecuteFunction displaying commands.html instead of running the function

Your answer