Issue with Creating Toolbar Button

[Ali]

Hi - I'm trying to create a toolbar button that goes next to the "More" dropdown in gmail. I'd like for the toolbar to only open when the user is viewing the thread. Currently, however, the button only appears when I comment out attributes of the button, and there is no title or icon when it does appear, and no description text when I hover my mouse over it (see attached image). Commenting in the code underneath the "title: 'Report'," line causes the button to entirely disappear and not visible. 

Any help would be appreciated! My goal is to have there be a dropdown when the button is clicked that gives a message to the user, and also to send information about the email the user is viewing to another email I specify. Help on how to start doing that would also be great!

Here is the code I have currently:

InboxSDK.load(2, '---omitted---').then(function(sdk){

  // the SDK has been loaded, now do something with it!

  sdk.Toolbars.registerThreadButton(function(toolbarButtonDescriptor) { //(composeView){

    title: 'Report',

    /*
    WHEN UNCOMMENTED, CAUSES BUTTON TO DISAPPEAR ENTIRELY

    iconUrl: 'https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjKlf66h_TbAhUEiVQKHVs5AOAQjRx6BAgBEAU&url=https%3A%2F%2Fwww.iconspng.com%2Fimage%2F64049%2Fremix-of-star-by-artokem&psig=AOvVaw1oy2SMPlXOpYJqEkyNg25O&ust=1530196266817718',

    listSection: sdk.Toolbars.SectionNames.INBOX_STATE,

    hasDropdown: true,

    onClick: function(event) {

    },*/

    

    toolbarButtonDescriptor.addToolbarButtonForApp({

      title: "Report",

      iconUrl: 'https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjKlf66h_TbAhUEiVQKHVs5AOAQjRx6BAgBEAU&url=https%3A%2F%2Fwww.iconspng.com%2Fimage%2F64049%2Fremix-of-star-by-artokem&psig=AOvVaw1oy2SMPlXOpYJqEkyNg25O&ust=1530196266817718',

      

      onClick: function(event) {

        event.DropdownView.setPlacementOptions({

          poisition: "top",

          hAlign: "center",

        }); 

      }

    });

  });

});

[Chris Cowan]

Are you seeing any errors in the console? The code you posted here is pretty broken and should trigger some errors (sdk.Toolbars.registerThreadButton takes an object, not a function, and then the object/function call isn't being closed).

Here's an example of registerThreadButton that works:

InboxSDK.load(2, 'toolbar-example').then(sdk => {

sdk.Toolbars.registerThreadButton({

iconUrl: chrome.runtime.getURL('foo.png'),

title: 'Foo Button',

listSection: sdk.Toolbars.SectionNames.INBOX_STATE,

hasDropdown: true,

onClick(event) {

event.dropdown.el.innerHTML = '<div><button type="button">foo</button></div><div>text</div>';

console.log('thread button click event', event);

}

});

});

[Ali]

Thanks, Chris! The dropdown is now functional - however, there is still no image displayed for the toolbar button itself. Any thoughts on how to fix that? I'm just trying to pull an image from a URL (which is https) for the button itself. 

Also, do you have any thoughts on how to interact with the email itself with the button (or reference to the documentation)? I'm looking to forward the email the user is looking at. I'd also like to use the "selectedThreadViews (ThreadView[])" property of the "onClick" function to display a user message, but I'm unsure how exactly I would use, for example, the "addNoticeBar()" method. Would you be able to provide an example of adding a notice bar when the user clicks the toolbar button?

[Chris Cowan]

The URLs in your example are both URLs to pages. The URLs need to lead directly to an image to work.

If you call the addNoticeBar() method on the ThreadView object, then a SimpleElementView object is returned, which has an HTMLElement "el" property that can be modified, and a destroy() method to remove the noticebar.

const noticeBar = threadView.addNoticeBar();
noticeBar.el.textContent = 'foo';

If you're using React, then you can render a React component into the noticebar like this:

const noticeBar = threadView.addNoticeBar();

ReactDOM.render(<MyComponent onRemove={() => noticeBar.destroy()} />, noticeBar.el);

noticeBar.on('destroy', () => ReactDOM.unmountComponentAtNode(noticeBar.el));

[Ali]

I noticed the error in the image link after I posted here and changed it to a link directly to an image (https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/2000px-Red_star.svg.png), and the image still doesn't load. Is that link still invalid, or is there something else wrong?

Do I need to use registerThreadViewHandler(handler) in order to make the notice bar? The notice bar does not appear.

Also, is there any capability to forward the email the user is currently viewing? Does InboxSDK have a capability to do so directly within gmail? I'm looking for the email the user is viewing to be forwarded when they click the button.

I really appreciate all this help - thank you!!

[Chris Cowan]

If you right-click on the added button and hit "Inspect", does the <img> element have its src attribute set to that URL? (If not, if you edit the src attribute to have that URL, does it work?) Maybe wikipedia doesn't allow their images to be hotlinked from another website.

You can get a reference to a ThreadView object as the selectedThreadViews property of the event parameter to the onClick callback of the sdk.Toolbars.registerThreadButton() call. (If your code can only work within a thread and not in the inbox list view, make sure to pass `positions: ['THREAD']` as one of the options to the sdk.Toolbars.registerThreadButton() call.)

The InboxSDK doesn't have a way to trigger forwarding an email. You could find the button on the page and simulate a click on it, but we may not be able to help you with that.

[Ali]

Thanks for your response, Chris! I checked the image link, but the image still does not appear, even after I changed it to one not from Wikipedia. Additionally, the notice bar still does not show up, even after I made sure the position was specified. Below is my code currently - do you see any issues that I missed?

InboxSDK.load(2, '-------').then(function(sdk){

    // Make a button on the top toolbar

    sdk.Toolbars.registerThreadButton( {

        title: 'Report',

        iconUrl: chrome.runtime.getURL('https://cdn.shopify.com/s/files/1/0885/7466/products/smiley-decal_32x32.png'),

        listSection: sdk.Toolbars.SectionNames.INBOX_STATE,

        hasDropdown: false,

        positions: ['THREAD'],

        onClick(event) {

            // Notice bar at the top of the thread view

            const noticeBar = threadView.addNoticeBar();

            noticeBar.el.textContent = 'Hello.';

            noticeBar.destroyed = false;

        }

        

    });

});

Thanks so much!

[Chris Cowan]

You need to access the selectedThreadViews property of the event parameter in the onClick callback: `const threadView = event.selectedThreadViews[0];`

If you inspect the button when running your code in your last post, you should see that the <img> element has an incorrect src attribute beginning with "chrome-extension://". You should only use `chrome.runtime.getURL(...)` for files included within your extension, not external URLs.

[Ali]

Great, that resolved the notice bar issue! 

Even using the file name of an image in the same directory as the javascript, the image still will not show. I tried using 'Logo.png', which is an image I saved from an https website to my computer, and the button remains without a logo. The file is within extension directory, so I have no idea why it isn't uploading. Thoughts?

Also, are you aware of any way to capture the entire body of the message the user is viewing? I was looking through the functions and it doesn't seem like this is directly possible, but maybe you know of a way to use the existing functions to do it.

[Aleem Mawani]

Look at ThreadView.getMessageViews and MessageView.getBodyElement()

ᐧ

--
You received this message because you are subscribed to the Google Groups "InboxSDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/73a745e9-b1f9-44f9-b3d3-dce8ce563ea4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ali]

Thank you so much for your help! 

And for anyone who was wondering about the image issue, you must put the following in your manifest to allow an image from your extension directory to be inserted into the extension:

"web_accessible_resources": [

    "*.png"

  ],