Chrome页面操作中的'setBadgeText'是什么意思？

Question

Chrome页面操作中的'setBadgeText'是什么意思？

javascriptgoogle-chromegoogle-chrome-extension

4

我在寻找如何将文本设置为页面操作图标时，找到了这个例子：

window.setInterval(function() {
    chrome.pageAction.setIcon({
        imageData: draw(10, 0),
        tabId: tabId
    });
}, 1000);

function draw(starty, startx) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.src = "icon_16.png"
    img.onload = function() {
        context.drawImage(img, 0, 2);
    }
    //context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "rgba(255,0,0,1)";
    context.fillRect(startx % 19, starty % 19, 10, 10);
    context.fillStyle = "white";
    context.font = "11px Arial";
    context.fillText("3", 0, 19);
    return context.getImageData(0, 0, 19, 19);
}

但是当我将它包含到我的eventPage.js中时，它会显示Uncaught TypeError: Cannot call method 'getContext' of null。然后我在Google上搜索这个错误，并发现我必须在DOM加载后才能使用getContext。所以我将上面的代码包装在jQuery .ready函数中，但结果仍然相同。 enter image description here

因此，我现在不知道错误出在哪里，也不知道应该怎么搜索。

- Vlad Holubiev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gkalpak · Accepted Answer

问题在于您的 canvas 元素未定义（而 undefined 没有 getContext() 方法）。问题的原因是您的背景页面中没有 canvas 元素，所以您需要先创建它。

例如：

// Replace that line:
var canvas = document.getElementById('canvas');

// With this line:
var canvas = document.createElement('canvas');

还有一个问题：

draw() 函数在图像加载完成之前就已经返回（并且它的回调函数绘制了图像到画布上）。为了确保页面操作的图像是在图像加载完成之后设置的，我已经修改了代码：

chrome.pageAction.onClicked.addListener(setPageActionIcon);

function setPageActionIcon(tab) {
    var canvas = document.createElement('canvas');
    var img = document.createElement('img');
    img.onload = function () {
        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 2);
        context.fillStyle = "rgba(255,0,0,1)";
        context.fillRect(10, 0, 19, 19);
        context.fillStyle = "white";
        context.font = "11px Arial";
        context.fillText("3", 0, 19);

        chrome.pageAction.setIcon({
            imageData: context.getImageData(0, 0, 19, 19),
            tabId:     tab.id
        });
    };
    img.src = "icon16.png";
}

根据您的使用需求，可能有更有效的方法（例如不必每次加载图像，而是保留已加载的实例）。

如果有人感兴趣，**[在这里][1]** 是我模拟“本机”Chrome徽章的可怜尝试。