How to write the pop-up HTML in a Crossrider extension?

Question

In general, Crossrider popups can be created with a few simple steps, as follows:

On the (Settings >) Browser Buttons page, enable the extension button for the browsers you want to support
In the background.js file:
1. Set the button icon using appAPI.browserAction.setResourceIcon (Note: don't forget to add the icon to the extension's resources)
2. Set the popup details using appAPI.browserAction.setPopup
  
  appAPI.browserAction.setPopup({resourcePath:'popup.html', height: 300, width: 300});
Create the template popup HTML that is specified as the resourcePath property in step 2.2.

On the Edit Code page, right-click on the Resources folder, point to Create, click Popup, and then specify the name for the popup file (e.g. popup.html).

At this point, you have a fully functional popup button that is triggered whenever the extension button is clicked.

To customize your popup, simply add HTML, CSS, and JS to the popup.html in a similar way to a regular HTML page adding remote resources using standard HTML tags. Use our crossriderMain function, as defined in our popup template, to add files from your extension's Resources folder. For example:

<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
    function crossriderMain($) {
        // Note: don't forget to add the files to the extension's resources
        // Load resource CSS
        appAPI.resources.includeCSS('style.css');
        // Load resource JS
        eval(appAPI.resources.get('script.js'));
        // Load resource image
        $('#myImg').attr('src', appAPI.resources.get('myImg.png'));
    }
</script>
</head>
<body>
Hello World!
<img id="myImg">
</body>
</html>

If you need any assistance with any specific issues, please feel free to email our support (support@crossrider.com).

[Disclaimer: I am a Crossrider employee]