javascript - 扩展徽章图标未显示

Question

我正在尝试使用来绘制徽章的图标，<canvas>但徽章根本没有在浏览器中显示。

在控制台中，我看到onload已记录。

manifest.json

{
  "name": "Extension",
  "description": "Description",
  "version": "0.0.1",
  "background": {"scripts": ["backgroundScript.js"], "persistent": false},
  "manifest_version": 2,
  "icons": {
    "64": "images/ico.png"
  },
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  },
  "browser_action": {
    "default_title": "Extension",
    "default_popup": "popup.html"
  }
}

backgroundScript.js

var canvas = document.createElement('canvas');
var img = document.createElement('img');
img.onload = function () {
  console.log('onload');
    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.browserAction.setIcon({
     imageData: context.getImageData(0, 0, 19, 19)
   });
};
img.src = 'images/ico.png';

.
├── COPYING
├── README.md
└── addon
    ├── backgroundScript.js
    ├── images
    │   └── ico.png
    ├── manifest.json
    ├── options.html
    ├── options.js
    ├── popup.html
    └── style.css

标签： javascriptgoogle-chrome-extension