如何为Chrome扩展程序禁用(显示为灰色)页面操作? [英] How to disable (gray out) page action for Chrome extension?

问题描述

除了docs.google.com上的页面之外，我希望所有页面上的Chrome扩展程序图标都被禁用(显示为灰色).这是我在background.js中的代码.

I want the Chrome extension icon to be disabled (grayed out) on all pages except for pages on docs.google.com. This is my code in background.js.

'use strict';

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: { urlContains: 'docs.google' },
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

从 pageActions 的文档中，这应该导致我的扩展程序图标被除URL中包含docs.google的页面外，所有页面上的页面均显示为灰色.但是该图标在所有页面上均处于活动状态(不显示为灰色).在非docs.google页面上点击它会导致它什么都不做，但我希望它首先显示为灰色.

From the documentation for pageActions this should result in my extension icon being gray on all pages except for ones that have docs.google in the URL. But the icon is active (NOT grayed out) on all pages. Tapping it on non docs.google pages results in it not doing anything, but I want it to be grayed out in the first place.

对此有何想法?

推荐答案

这是 Chrome中的错误，到目前为止，还不清楚它是否可以修复.

This is a bug in Chrome and so far it's unclear if it's even fixable.

与此同时，您可以自己维护图标:

Meanwhile, you can maintain the icon yourself:

1. 在任何图像编辑器中制作图标的灰度版本，然后分别保存

1. make a grayscale version of the icon(s) in any image editor and save them separately

在manifest.json中指定灰色图标:

specify the gray icon in in manifest.json:

"page_action": {
  "default_icon": {
    "16": "icons/16-gray.png",
    "32": "icons/32-gray.png"
  }
}

使用 SetIcon 操作设置普通图标:

set the normal icon using SetIcon action:

chrome.declarativeContent.onPageChanged.removeRules(async () => {
  chrome.declarativeContent.onPageChanged.addRules([{
    conditions: [
      new chrome.declarativeContent.PageStateMatcher({
        pageUrl: { hostPrefix: 'docs.google.' },
      }),
    ],
    actions: [
      new chrome.declarativeContent.SetIcon({
        imageData: {
          16: await loadImageData('icons/16.png'),
          32: await loadImageData('icons/32.png'),
        },
      }),
      new chrome.declarativeContent.ShowPageAction(),
    ],
  }]);
});

function loadImageData(url) {
  return new Promise(resolve => {
    const canvas = document.body.appendChild(document.createElement('canvas'));
    const context = canvas.getContext('2d');
    const img = new Image();
    img.onload = () => {
      context.drawImage(img, 0, 0);
      const data = context.getImageData(0, 0, img.width, img.height);
      canvas.remove();
      resolve(data);
    };
    img.src = url;
  });
}

请注意，在将来的ManifestV3扩展服务工作程序中，您将在loadImageData中使用fetch + OffscreenCanvas.

Note, in the future ManifestV3 extension service worker you would use fetch + OffscreenCanvas in loadImageData.

这篇关于如何为Chrome扩展程序禁用(显示为灰色)页面操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！