无法将参数传递给chrome.declarativeContent.SetIcon [英] Can't pass arguments to chrome.declarativeContent.SetIcon

问题描述

我正在尝试开发一个简单的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
}，
权限：[
declarativeContent
] 
} 
  

background.js $ b

  chrome.runtime.onInstalled.addListener（function（）{
 chrome.declarativeContent.onPageChanged.rem oveRules（undefined，function（）{
 chrome.declarativeContent.onPageChanged.addRules（[
 {
 // rule1 
 conditions：[
 new chrome.declarativeContent.PageStateMatcher （{
 pageUrl：{urlPrefix：'http://www.example.com/'} 
}）
]，
操作：[
 new chrome。 declarativeContent.ShowPageAction（）
] 
}，
 {
 // rule2 
条件：[
 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


但是在安装扩展程序的时候会发现：



 响应events.removeRules时出错：错误：参数1的值无效。属性'.0'：值与任何有效的类型选择不匹配。 
  




解决方案

我深深陷入这个错误，该文档不能很好地反映使用 path 参数未实现的事实。这当然是一个错误，可以通过此处进行追踪。

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

  //将本地路径指定为19x19图标
 //并将正确的SetIcon操作传递给回调函数
函数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}）; 
回调（动作）; 
} 
 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） p>

  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} 
}）; 
回调（动作）; 
} 
 image38.src = chrome.runtime.getURL（path38）; 
} 
 image19.src = chrome.runtime.getURL（path19）; 
} 
  

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.

解决方案

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

这篇关于无法将参数传递给chrome.declarativeContent.SetIcon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！