chrome'setBadgeText'pageAction

问题描述

$ b

  window.setInterval（function（）函数）如何设置文本到Page Action图标并找到此示例： {
 chrome.pageAction.setIcon（{
 imageData：draw（10，0），
 tabId：tabId 
}）; 
}，1000）; 
 
函数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后它表示未捕获的TypeError：无法调用null的方法'getContext'。然后我搜索了这个错误，发现只有在加载DOM后，我才必须使用 getContext 。所以我将上面的代码包装到jQuery .ready 函数中，但结果相同。

所以我没有知道错误现在在哪里以及以何种方式搜索。

解决方案

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

例如：

  //替换那行：
 var canvas = document.getElementById（'canvas' ）; 
 
 //用这行代码：
 var canvas = document.createElement（'canvas'）; 
  

---

还有一个问题：

$ b $ < draw（）函数返回，之后加载图像（并执行其回调函数，将图像绘制到画布）。我修改了代码，以确保在图片加载后设置了页面操作图像：

  chrome.pageAction.onClicked.addListener（setPageActionIcon）; 
 
函数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; 
 
 $ / code> 

---

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.

解决方案

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

---

这篇关于chrome'setBadgeText'pageAction的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！