How do I create an Outlook add-in with the Yeoman Generator that activates when reading an email

Question

Installed Node.js and generator-office

yo office

select Office Add-in Task Pane project using React framework

select JavaScript

Name add-in: My Add-in

Select Outlook

npm run build

npm run start

Opened My Add-in in VS code. In new Outlook clicked Get add-ins and navigated to My add-ins Custom Addins. Clicked Add a custom add-in and Add from File... Loaded the below manifest.xml. Add in button is visible in the ribbon only when composing a new email or forwarding an email.
Works as expected to open a task pane when the button is clicked.

I need an add-in that activates (button is visible) and opens a task pane only when I am reading an email.

I've tried making several changes to the manifest, including replacing "MessageComposeCommandSurface" with "MessageReadCommandSurface", but I have not found a change that activates when reading.

Here is my manifest.xml.

  <Id>58e9bf0a-50e1-4d12-bbd7-0bc82a9a70a8</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Contoso</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="My Add-in"/>
  <Description DefaultValue="A template to get started."/>
  <IconUrl DefaultValue="some url"/>
  <HighResolutionIconUrl DefaultValue="some url"/>
  <SupportUrl DefaultValue="some url"/>
  <AppDomains>
    <AppDomain>some url</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Mailbox"/>
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.1"/>
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="some url"/>
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>
  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
  </Rule>
  <VersionOverrides some url" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="MailHost"/>
    </Hosts>
    <VersionOverrides xmlns="some url" xsi:type="VersionOverridesV1_1">
      <Requirements>
        <bt:Sets DefaultMinVersion="1.3">
          <bt:Set Name="Mailbox"/>
        </bt:Sets>
      </Requirements>
      <Hosts>
        <Host xsi:type="MailHost">
          <DesktopFormFactor>
            <FunctionFile resid="Commands.Url"/>
            <ExtensionPoint xsi:type="MessageComposeCommandSurface">
              <OfficeTab id="TabDefault">
                <Group id="msgComposeGroup">
                  <Label resid="GroupLabel"/>
                  <Control xsi:type="Button" id="msgComposeOpenPaneButton">
                    <Label resid="TaskpaneButton.Label"/>
                    <Supertip>
                      <Title resid="TaskpaneButton.Label"/>
                      <Description resid="TaskpaneButton.Tooltip"/>
                    </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>
              </OfficeTab>
            </ExtensionPoint>
          </DesktopFormFactor>
        </Host>
      </Hosts>
      <Resources>
        <bt:Images>
          <bt:Image id="Icon.16x16" DefaultValue="some url/>
          <bt:Image id="Icon.32x32" DefaultValue="some url"/>
          <bt:Image id="Icon.80x80" DefaultValue="some url"/>
        </bt:Images>
        <bt:Urls>
          <bt:Url id="Commands.Url" DefaultValue="some url"/>
          <bt:Url id="Taskpane.Url" DefaultValue="some url"/>
        </bt:Urls>
        <bt:ShortStrings>
          <bt:String id="GroupLabel" DefaultValue="Contoso Add-in"/>
          <bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
        </bt:ShortStrings>
        <bt:LongStrings>
          <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opens a task pane."/>
          <bt:String id="ActionButton.Tooltip" DefaultValue="Perform an action when clicked."/>
        </bt:LongStrings>
      </Resources>
    </VersionOverrides>
  </VersionOverrides>
</OfficeApp>

Answer 1

The manifest file looks good except the following markup:

<ExtensionPoint xsi:type="MessageComposeCommandSurface">

Instead, you need to use the following:

<ExtensionPoint xsi:type="MessageReadCommandSurface">

Also you don't forget to clear the Office cache and side-load the add-in anew.