chrome 'setBadgeText' on pageAction

Question

I was looking how to set text to Page Action icon and found this example:

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

But after I include it to my eventPage.js it says Uncaught TypeError: Cannot call method 'getContext' of null . Then I googled for this error and found that I have to use getContext only after DOM is loaded. So I wrapped above code into jQuery .ready function but result was the same.

So I don't know where is an error now and in which way I have to search.

Answer 1

The problem is that your canvas element is undefined (and undefined has no getContext() method). And the cause of the problem is that there is no canvas element in your background page, so you need to create it first.

E.g.:

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

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

---

One more problem:

The draw() function returns before the image is loaded (and its callback executed, drawing the image onto the canvas). I have modified the code, in order to ensure that the page-action image is set after the image is loaded:

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

_{Depending on how your going to use this, there might be more efficient ways (e.g. not having to load the image every time, but keep a loaded instance around).}

---

_{Should anyone be interested, **[here][1]** is my lame attempt to simulate a "native" Chrome badge.}