鉻「setBadgeText」上pageAction

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()該函數返回之前的圖像被加載（和其回調執行時，繪製圖像到畫布上）。我已經修改了代碼，以確保頁面動作圖像設置後的圖像加載：

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是我的模擬 「本機」 鍍鉻徽章跛腳的嘗試。}