I cannot see my gadget load after Test Installation Flow

Question

What I want to achieve?
My gadget to show up for all the emails in my inbox when an email is opened.

Things I have

1. I have a Google for Business Account and I am able to deploy contextual gadgets from the store.
2. I have a manifest file Apparently this is no longer required and replaced by configuring "Google Apps Marketplace SDK" in the API manager dashboard
3. I have a gadget file https://outlookbridge.synbeta.com/Google/gadget.xml
4. I have created a project, enabled two apps, Gmail API and Google Apps Marketplace SDK, and a OAUTH 2.0 Client ID

Gadget.xml file below

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Revelation Bridge"
    description="Revelation Bridge for Gmail"
    height="220"
    author="Yellowfish Software"
    author_email="info@yellowfishsoftware.com"
    author_location="Westport, CT">

    <!-- This one is not specific to Gmail contextual gadgets. -->
    <Require feature="dynamic-height"/>

    <Require feature="google.contentmatch">
      <Param name="extractors">
        google.com:SenderEmailExtractor
      </Param>
    </Require>

  </ModulePrefs>

  <Content type="html" view="card">
    <![CDATA[
      <!-- Start with Single Sign-On -->
      <script type="text/javascript">

        <!-- Fetch the array of content matches. -->
        matches = google.contentmatch.getContentMatches();
        var matchList = document.createElement('UL');
        var listItem;
        var extractedText;

        <!-- Iterate through the array and display output for each match. -->
        for (var match in matches) {
          for (var key in matches[match]) {
            listItem = document.createElement('LI');
            extractedText = document.createTextNode(key + ": " + matches[match][key]);
            listItem.appendChild(extractedText);
            matchList.appendChild(listItem);
          }
        }
        document.body.appendChild(matchList);
        gadgets.window.adjustHeight(100);
      </script>
    ]]>
  </Content>
</Module>

This is how the marketplace SDK is configured

After clicking on Test Installation and giving access to my gmail

Also I do not know what is the purpose of the manifest file when I do not tell Google the location of my manifest file?

I want my gadget to show itself on every email message. Under API Manager -> Google Apps Marketplace SDK -> Configuration -> Gmail contextual gadget extension, I have Extractor URL as "tag:google.com,2010:auth/contextual/extractor/FROM_ADDRESS" and one scope selected "Mail - Sender Address". The Gadget URL as https://outlookbridge.synbeta.com/Google/gadget.xml.

I do not see my gadget in any emails I open. What gives?

Answer 1

I finally figured out how to make this work and this is what I did and what works as of August 24, 2016

1. You will need a Google Business Account. This will not work for regular gmail users.
2. You will need four png logo files with dimensions 128 * 128, 96 * 96, 48 * 48, and 32 * 32.
3. Login to https://console.developers.google.com and from the burger menu on the top left corner, click on IAM & Admin and then click on All Projects
4. Create a new project by and this acts like a container for your gadget and the Google APIs you may need to consume, including any OAUTH stuff you may require.
5. Once the project is created, from the burger menu, click on API Manager. This API Manager will be for a selected project which you created earlier
6. The Dashboard shows you the APIS that are enabled.
7. Click on Library, and search for, Google Apps Marketplace SDK, click on it, and click on "Enable"
8. After you have enabled the API, it will prompt you to create OAuth 2.0 credentials before you could configure your API.
9. Authorized JavaScript origins, is where your scripts and gadget file is located.
10. Authorized JavaScript origins, is also required.
11. You do not have to download the credentials.
12. Come back to the dashboard screen and click on Google Apps Marketplace SDK under API
13. Click on Configuration, the second tab
14. In the configuration screen, Enter Application name and application description. This is not what shows up when the gadget shows up in an email. This is what my screen looks like

The Important bit here. The way I understand extractors and gadgets. Extractor is a condition that you specify on which emails you want your gadget to show up. If you want your gadget to show up for all the emails then you would use the extractor google.com:MessageIDExtractor.

This is how I specified the extractor, all 6 of them, you may only need to use one if you want a gadget to show up for all the emails, but I wanted to test what I would get back.

Next to the extractor you could also see the scope selected.

Specify the extractors in your gadget file like this

<Require feature="google.contentmatch">
      <Param name="extractors">google.com:SenderEmailExtractor, google.com:RawSubjectExtractor, google.com:SubjectExtractor, google.com:EmailBodyExtractor, google.com:EmailTimeExtractor, google.com:MessageIDExtractor</Param>
    </Require>

The parameters that you see in my settings, I got them from here and I did not bother changing the names of those parameters https://developers.google.com/gmail/contextual_gadgets#supported_extractors

The extractor param value for the 6 extractors is set to ".*". This basically tells Google to load the extractor for all the values.

Click on Save

After the page is saved, you will see Test installation flow button at the top. Click on it to install the gadget for you only.

It may take 5 minutes before your gadget is installed after you have finished the installation process. You know your gadget is installed by clicking on the launch bar icon in your and More

If you still do not see your gadget then open your inbox in a new tab with this URL https://mail.google.com/mail/u/0/?nogadgetcache=1#inbox

You could use this code in your gadget to print all the values caught by your extractors

<Content type="html" view="card">
    <![CDATA[
      <!-- Start with Single Sign-On -->
      <script type="text/javascript">

        <!-- Fetch the array of content matches. -->
        matches = google.contentmatch.getContentMatches();
        var matchList = document.createElement('UL');
        var listItem;
        var extractedText;

        <!-- Iterate through the array and display output for each match. -->
        for (var match in matches) {
          for (var key in matches[match]) {
            listItem = document.createElement('LI');
            extractedText = document.createTextNode(key + ": " + matches[match][key]);
            listItem.appendChild(extractedText);
            matchList.appendChild(listItem);
          }
        }
        document.body.appendChild(matchList);
        gadgets.window.adjustHeight(100);
      </script>
    ]]>
  </Content>

For completion sake, here is my sample gadget file

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="In Gadget"
    description="In Gadget"
    height="220"
    author="In Gadget Software"
    author_email="info@InGadget.com"
    author_location="In Gadget, Earth">

    <!-- This one is not specific to Gmail contextual gadgets. -->
    <Require feature="dynamic-height"/>

    <Require feature="google.contentmatch">
      <Param name="extractors">google.com:SenderEmailExtractor, google.com:RawSubjectExtractor, google.com:SubjectExtractor, google.com:EmailBodyExtractor, google.com:EmailTimeExtractor, google.com:MessageIDExtractor</Param>
    </Require>

  </ModulePrefs>

  <Content type="html" view="card">
    <![CDATA[
      <!-- Start with Single Sign-On -->
      <script type="text/javascript">

        <!-- Fetch the array of content matches. -->
        matches = google.contentmatch.getContentMatches();
        var matchList = document.createElement('UL');
        var listItem;
        var extractedText;

        <!-- Iterate through the array and display output for each match. -->
        for (var match in matches) {
          for (var key in matches[match]) {
            listItem = document.createElement('LI');
            extractedText = document.createTextNode(key + ": " + matches[match][key]);
            listItem.appendChild(extractedText);
            matchList.appendChild(listItem);
          }
        }
        document.body.appendChild(matchList);
        gadgets.window.adjustHeight(100);
      </script>
    ]]>
  </Content>
</Module>

As far as I can tell you do not need a manifest file to test your gadget.

The above gadget only seem to work if gadget content type is html and type is card.