Crossrider : How to show multiple browser buttons or a menu with multiple items using crossrider?

I’ve a requirement to show multiple browser buttons. After reading the documentation as well as some questions on stack overflow – I found that Cross Rider only supports one browser button per extension.

Can I show some menu in browser(I'm not willing to use context menu) which is triggered once user clicks on crossrider browser button? If so, how can i handle the click event on any menu item using jquery?

I’ll be very thankful for any support / way out in this regard.

Solution

From experience, I've most often seen developers create a menu like this within a browser action popup that opens when the button is clicked using Crossrider's appAPI.brwoserAction.setPopup method. The following simple example shows how to create a menu that opens different search engines:

Code in background.js file:

appAPI.ready(function() {
    // Set the button to use icon from resources
    appAPI.browserAction.setResourceIcon('icon.png');
    // Sets the resource path for the popup
    appAPI.browserAction.setPopup({
        resourcePath:'popup.html',
        height: 300,
        width: 300
    });
});

Code in popup.html resource file:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
  $('#link-google')
    .click(function() {
      appAPI.openURL({
        url:'http://www.google.com',
        where:'tab'
      });
    });
  $('#link-bing')
    .click(function() {
      appAPI.openURL({
        url:'http://www.bing.com',
        where:'tab'
      });
    });
  $('#link-yahoo')
    .click(function() {
      appAPI.openURL({
        url:'http://www.yahoo.com',
        where:'tab'
      });
    });
}
</script>
</head>
<body>
<ul>
  <li><a href='#' id='link-google'>Goto Google Search</a></li>
  <li><a href='#' id='link-bing'>Goto Bing Search</a></li>
  <li><a href='#' id='link-yahoo'>Goto Yahoo Search</a></li>
</ul>
</body>
</html>

[Disclosure: I am a Crossrider employee]