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 (/*).

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 : '/'}
                    })
                ],
                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 /?q1=green

But during installation of extension things e to:

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

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./*).

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./'}
                    })
                ],
                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./?q1=green

But during installation of extension things e to:

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

• javascript
• google-chrome
• google-chrome-extension

3 Answers 3

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

In fact, you can use new chrome.declarativeContent.SetIcon({ path:'yourPath.png' }), No need to specify size path: {"19": "images/icons/green.png"}, its default value is: 16 Use declarativeContent.SetIcon need to pay attention to a problem, it is actually a bug.

Actual use of path will eventually be automatically converted to ImageData.

see screenshot:

The root cause of the error of declarativeContent.SetIcon is: it is an asynchronous API, but at the same time it has no asynchronous callback. The only thing you can do is wait.

const action = new chrome.declarativeContent.SetIcon({ path: 'assets/icon.png' });
console.log(action.imageData); // =>  undefined

see screenshot:

// invalid
new chrome.declarativeContent.SetIcon({ path: 'assets/icon.png' }, action => console.log(action));  

It takes a while to wait:

const action = new chrome.declarativeContent.SetIcon({ path: 'assets/icon.png' });
setTimeout(() => {
  console.log(action.imageData); // {16: ArrayBuffer(1060)}
}, 5);

see screenshot:

When you understand the reason for the error of SetIcon, the problem will be solved well. You only need to put the operation of addRules in the event.

onInstalled event

const rule2 = { id: 'hideAction', conditions: [...], actions: [new chrome.declarativeContent.SetIcon({ path: 'assets/icon.png' })]};

chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([rule2]);
  });
});

pageAction.onClicked

const rule2 = { id: 'hideAction', conditions: [...], actions: [new chrome.declarativeContent.SetIcon({ path: 'assets/icon.png' })]};

chrome.pageAction.onClicked.addListener(() => {
  if (condition) {
    chrome.declarativeContent.onPageChanged.removeRules(['hideAction']);
  } else {
    chrome.declarativeContent.onPageChanged.addRules([rule2]);
  }
});

There are some related information:

SetIcon source code

declarativeContent.SetIcon = function (parameters) {
  // TODO(devlin): This is very, very wrong. setIcon() is potentially
  // asynchronous (in the case of a path being specified), which means this
  // bees an "asynchronous constructor". Errors can be thrown *after* the
  // `new declarativeContent.SetIcon(...)` call, and in the async cases,
  // this wouldn't work when we immediately add the action via an API call
  // (e.g.,
  //   chrome.declarativeContent.onPageChange.addRules(
  //       [{conditions: ..., actions: [ new SetIcon(...) ]}]);
  // ). Some of this is tracked in http://crbug./415315.
  setIcon(
    parameters,
    $Function.bind(function (data) {
      // Fake calling the original function as a constructor.
      $Object.setPrototypeOf(this, nativeSetIcon.prototype);
      $Function.apply(nativeSetIcon, this, [data]);
    }, this)
  );
};

Discussion of related issues: http://crbug./415315

No solution

As the guys before me mentioned, this is a bug. There are no solutions, only workarounds.

Workarounds

#1: Draw icon using canvas

As Xan described in his answer already.

#2 Wait for icon load (timeout hack)

Thanks to weiya-ou's answer I realized that I can just wait for the async icon data transformation to finish.

// Make your handler `async`
chrome.runtime.onInstalled.addListener(async () => {
  const action = await new chrome.declarativeContent.SetIcon({
    path: {
      19: 'images/19.png',
      38: 'images/38.png',
    },
  })

  // THE WAIT STARTS

  // Wait max. 10 loops
  for (let i = 0; i < 10; i++) {
    // Create a promise
    const checkAvailability = new Promise((resolve) => {
      // Resolve promise after 100ms
      setTimeout(() => resolve(!!action.imageData), 100)
    })

    // Wait for the promise resolution
    const isAvailable = await checkAvailability

    // When image available, we are done here
    if (isAvailable) break
  }

  // THE WAIT ENDS

  const condition = new chrome.declarativeContent.PageStateMatcher({
    pageUrl: { hostEquals: 'my.page' },
  })

  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [condition],
        actions: [action],
      },
    ]);
  });
});

#3 Use chrome.tabs

You would need the tabs permission (as said here).

chrome.tabs.onUpdated.addListener((tabId, { status }, { url }) => {
  // Only check when URL is resolved
  if (status !== 'plete') return

  // What is our target page?
  const isOurPage = url?.match(/my\.page\/)

  if (isOurPage) {
    // Show active icon
    chrome.pageAction.setIcon({
      path: {
        19: 'images/19.png',
        38: 'images/38.png',
      },
      tabId,
    })
  } else {
    // Show inactive icon
    chrome.pageAction.setIcon({
      path: {
        19: 'images/19-inactive.png',
        38: 'images/38-inactive.png',
      },
      tabId,
    })
  }
})