crossrider extension installed on all browsers but working only in chrome

Question

I have successfully installed the my crossrider extension on Chrome, Firefox and IE (all up to date) but the browser button (although enabled on all) only works for Chrome.

Background code seems to work, since I can trigger alerts.

My background.js looks like this:

appAPI.ready(function() {
var popupDims = {
    CH: {height: 400, width: 400},
    FF: {height: 400, width: 400},
    IE: {height: 400, width: 400},
    SF: {height: 400, width: 400}
};

if ("CHFFIESF".indexOf(appAPI.platform) !== -1) {
    appAPI.browserAction.setPopup({
        resourcePath:'popup.html',
        height:popupDims[appAPI.platform].height,
        width:popupDims[appAPI.platform].width
    });
}
else {
    alert('This extension is not supported on your browser');
}});

In my popup.html I have some javascript:

function crossriderMain($) { 
// load libraries
eval(appAPI.resources.get('select2.js'));

$('[as-trigger]').click(function () {
    // retrieves the information for the active tab
    appAPI.tabs.getActive(function(tabInfo) {
        activeUrl = tabInfo.tabUrl;

        appAPI.request.get({
            url: 'http://...',
            onSuccess: function(response, additionalInfo) {
                // show message
            },
            onFailure: function(httpCode) {
                console.log('GET:: Request failed. HTTP Code: ' + httpCode);
            }
        });


    });

})

$('[as-project-dropdown]').select2().on('select2-selecting', function (e) {
    // some jquery code
});

appAPI.request.get({
    url: 'http://...',
    onSuccess: function(response, additionalInfo) {
        var dataObject = JSON.parse(response);

        $.each(dataObject.data, function(key, value) {
            $('[as-project-list]').append('some html...');
        });

        $('[as-companyname]').html(dataObject.company);
    },
    onFailure: function(httpCode) {
        console.log('GET:: Request failed. HTTP Code: ' + httpCode);
    }
});}

And in my firefox console I can see an error thrown by my extension:

MyExtension <Warning: document.getElementById(...) is null Function-name: appAPI.request.get User callback>

@Crossrider support: my app id is 65982

Answer 1

Looking at your code I can see that you did not set the browser action's icon. Per the Browser Action docs, on some browsers this is essential for the button to properly initialize. I created an extension with your code and added the icon using appAPI.browserAction.setResourceIcon and the button worked fine.

So taking the snippet from your background.js, add the icon as follows:

appAPI.ready(function() {
var popupDims = {
    CH: {height: 400, width: 400},
    FF: {height: 400, width: 400},
    IE: {height: 400, width: 400},
    SF: {height: 400, width: 400}
};

if ("CHFFIESF".indexOf(appAPI.platform) !== -1) {
    appAPI.browserAction.setResourceIcon('logo.jpg');
    appAPI.browserAction.setPopup({
        resourcePath:'popup.html',
        height:popupDims[appAPI.platform].height,
        width:popupDims[appAPI.platform].width
    });
}
else {
    alert('This extension is not supported on your browser');
}});

[Disclosure: I am a Crossrider empployee]