javascript - pageAction 上的 chrome 'setBadgeText'

Question

我在寻找如何将文本设置为页面操作图标并找到了这个示例:

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 。然后我用谷歌搜索这个错误，发现只有在加载 DOM 后我才必须使用 getContext 。所以我将上面的代码包装到 jQuery .ready 函数中，但结果是一样的。

所以我现在不知道错误在哪里，我必须以何种方式搜索。

Answer 1

问题是您的 canvas 元素未定义(undefined 没有 getContext() 方法)。而问题的原因是你的后台页面中没有canvas元素，所以你需要先创建它。

例如:

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

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

---

还有一个问题:

draw() 函数在图像加载之前返回(并执行回调，将图像绘制到 Canvas 上)。我已经修改了代码，以确保在加载图片后设置页面操作图片:

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 徽章的蹩脚尝试。