javascript - crossrider 扩展安装在所有浏览器上，但仅在 Chrome 中工作

Question

我已在 Chrome、Firefox 和 IE(均为最新版本)上成功安装了 my crossrider 扩展程序，但浏览器按钮(尽管在所有浏览器上均已启用)仅适用于 Chrome。

后台代码似乎有效，因为我可以触发警报。

我的background.js看起来像这样:

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');
}});

在我的 popup.html 中我有一些 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);
    }
});}

在我的 Firefox 控制台中，我可以看到我的扩展抛出一个错误:

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

@Crossrider 支持:我的应用 ID 是 65982

Answer 1

查看您的代码，我可以看到您没有设置浏览器操作的图标。根据 Browser Action docs ，在某些浏览器上，这对于按钮正确初始化至关重要。我使用您的代码创建了一个扩展，并使用 appAPI.browserAction.setResourceIcon 添加了图标而且按钮工作正常。

因此，从 background.js 中获取代码片段，添加图标，如下所示:

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');
}});

[披露:我是 Crossrider 员工]