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

Question

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

What triggers it and how do you add an image, eg if you want to show a logo in the pop-up with some text, do you leave the extension.js since you will be writing all the codes in the pop-up HTML?

I am so confused here.

score 11 · Accepted Answer · answered Aug 11 '13 at 08:12

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]

So you would modify content in the pop up using jquery just as you normally do in dom, for example if you are planning to give back progress of something that is being carried out?? I also had an issue adding an image to the pop up, al try what ave seen above from you example. — Knights, Aug 11 '13 at 18:01
Correct, you can use jquery within the crossriderMain function to manipulate the DOM. Regarding the image issue, if can you provide your code AND confirm that you uploaded the image to the Resource folder, I am happy to help you. [Disclaimer: I am a Crossrider employee] — Shlomo, Aug 12 '13 at 12:04
If you need a live example, you can check out Crossrider's Popup demo: http://crossrider.com/apps/24802/ide — Edenshaw, Oct 01 '14 at 20:17

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

1 Answers1