无法将参数传递给chrome.declarativeContent.SetIcon

Question

我正在尝试开发一个简单的chrome扩展。 pageAction的默认图标应显示在具有特定网址（http://www.example.com/*）的网页上。

有两个文件

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应该显示pageAction的图标，rule2应该在包含http://www.example.com/?q1=green

的网址的网页上将图标更改为绿色版

但在安装扩展程序期间，事情就会出现：

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

Answer 1

我深深挖掘了这个错误，似乎文档没有很好地反映出未使用path参数的事实。这肯定是一个错误，跟踪here。

目前，为了解决此问题，您需要在调用SetIcon之前加载图像并将其转换为ImageData格式。

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

如果需要，可以将其推广为支持高DPI图标（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(image,0,0,19,19);
    var imageData19 = ctx.getImageData(0,0,19,19);
    var image38 = new Image();
    image38.onload = function() {
      ctx.drawImage(image,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);
}

Answer 2

实际上，您可以使用new chrome.declarativeContent.SetIcon({ path:'yourPath.png' })， 无需指定大小path: {"19": "images/icons/green.png"}，其默认值为：16 使用declarativeContent.SetIcon需要注意的一个问题，它实际上是一个错误。

实际使用path最终会自动转换为ImageData。

查看屏幕截图：

declarativeContent.SetIcon错误的根本原因是：它是一个异步API，但同时没有异步回调。您唯一可以做的就是等待。

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

查看屏幕截图：

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

等待一段时间：

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

查看屏幕截图：

当您了解SetIcon错误的原因时，该问题将得到很好的解决。 您只需要在事件中放入addRules的操作即可。

已安装事件

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

有一些相关信息：

SetIcon源代码

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
  // becomes 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.com/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)
  );
};

有关问题的讨论： http://crbug.com/415315

Answer 3

无解

正如我前面的人提到的，这是一个错误。没有解决方案，只有变通办法。

解决方法

#1：使用画布绘制图标

如Xan中已经描述的his answer。

#2 等待图标加载（超时破解）

感谢 weiya-ou 的 answer，我意识到我可以等待异步图标数据转换完成。

chrome.tabs

#3 使用 tabs

您需要 chrome.tabs.onUpdated.addListener((tabId, { status }, { url }) => { // Only check when URL is resolved if (status !== 'complete') return // What is our target page? const isOurPage = url?.match(/my\.page\.net/) 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, }) } }) 权限（如 here 所述）。

(pd.Series(Dict1).to_frame().T
 .append(df,sort=False).fillna({"Id":"Desc"}).loc[:,df.columns])