pageAction上的chrome'setBadgeText'

Question

我正在寻找如何将文本设置为Page Action图标并找到此示例：

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函数中，但结果是一样的。

所以我现在不知道错误在哪里以及我必须搜索的方式。

Answer 1

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

E.g：

// 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";
}

<子> 根据您的使用方式，可能会有更有效的方法（例如，不必每次都加载图像，而是保持加载的实例）。

---

<子> 如果有人有兴趣， here 是我模仿“原生”Chrome徽章的蹩脚尝试。