javascript - Can't pass arguments to chrome.declarativeContent.SetIcon

Question

I'm trying to develop a simple chrome extension. There is a pageAction's default icon that should appear on the pages with a specific URL (http://www.example.com/*).

There is a two file

manifest.json

{
  "manifest_version": 2,
  "name": "name",
  "description": "description",
  "version": "1.0",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "page_action": {
    "default_icon" : "images/icons/19.png"
  },
  "permissions": [
    "declarativeContent"
  ]
}

background.js

chrome.runtime.onInstalled.addListener(function () {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
        chrome.declarativeContent.onPageChanged.addRules([
            {
                // rule1
                conditions : [
                    new chrome.declarativeContent.PageStateMatcher({
                        pageUrl : {urlPrefix : 'http://www.example.com/'}
                    })
                ],
                actions    : [
                    new chrome.declarativeContent.ShowPageAction()
                ]
            },
            {
                // rule2
                conditions : [
                    new chrome.declarativeContent.PageStateMatcher({
                        pageUrl : {queryContains : 'q1=green'}
                    })
                ],
                actions    : [
                    new chrome.declarativeContent.SetIcon({
                        path : {"19" : "images/icons/green.png"}
                    })
                ]
            }
        ]);
    });
});

rule1 should show pageAction's icon and rule2 should change icon to green version on the pages with URL that looks like http://www.example.com/?q1=green

But during installation of extension things come to:

Error in response to events.removeRules: Error: Invalid value for argument 1. Property '.0': Value does not match any valid type choices.

Answer 1

I dug deeply into this error, and it seems like the documentation does not reflect well the fact that using path parameter is not implemented. This is certainly a bug, tracked here.

For now, to fix this you need to load the image and convert it to ImageData format before calling SetIcon.

// Takes a local path to intended 19x19 icon
//   and passes a correct SetIcon action to the callback
function createSetIconAction(path, callback) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var image = new Image();
  image.onload = function() {
    ctx.drawImage(image,0,0,19,19);
    var imageData = ctx.getImageData(0,0,19,19);
    var action = new chrome.declarativeContent.SetIcon({imageData: imageData});
    callback(action);
  }
  image.src = chrome.runtime.getURL(path);
}

chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
  createSetIconAction("images/icons/green.png", function(setIconAction) {
    chrome.declarativeContent.onPageChanged.addRules([
      /* rule1, */
      {
        conditions : [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl : {queryContains : 'q1=green'}
          })
        ],
        actions    : [ setIconAction ]
      }
    ]);        
  });
});

If needed, this can be generalized to support high-DPI icon (19 + 38):

function createSetIconAction(path19, path38, callback) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var image19 = new Image();
  image19.onload = function() {
    ctx.drawImage(image19,0,0,19,19); // fixed
    var imageData19 = ctx.getImageData(0,0,19,19);
    var image38 = new Image();
    image38.onload = function() {
      ctx.drawImage(image38,0,0,38,38);
      var imageData38 = ctx.getImageData(0,0,38,38);      
      var action = new chrome.declarativeContent.SetIcon({
        imageData: {19: imageData19, 38: imageData38}
      });
      callback(action);
    }
    image38.src = chrome.runtime.getURL(path38);
  }
  image19.src = chrome.runtime.getURL(path19);
}