crossrider扩展安装在所有浏览器上，但只能在chrome中使用

crossrider extension installed on all browsers but working only in chrome

本文关键字：chrome 安装 扩展 crossrider 浏览器      更新时间：2023-09-26

我已经成功地在Chrome、Firefox和IE上安装了crossrider扩展（都是最新的），但浏览器按钮（尽管在所有浏览器上都启用了）只适用于Chrome。

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

我的后台.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

查看您的代码，我可以看到您没有设置浏览器操作的图标。根据浏览器操作文档，在某些浏览器上，这对于按钮正确初始化至关重要。我用你的代码创建了一个扩展，并使用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员工]

相关文章：