google-chrome - 如何禁用(变灰)Chrome 扩展的页面操作？

Question

我希望在除 docs.google.com 上的页面之外的所有页面上禁用(变灰)Chrome 扩展程序图标。这是我在 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 页面上点击它会导致它什么也不做，但我希望它首先变灰。
对此有何想法？

Answer 1

这是一个 bug in Chrome到目前为止还不清楚它是否可以修复。
同时，您可以自己维护图标:

在任何图像编辑器中制作图标的灰度版本并单独保存。

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

list V2:

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

ManifestV3 使用 action而不是 page_action

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

使用 SetIcon 设置普通图标行动:

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'),
        },
      }),
      chrome.declarativeContent.ShowAction
        ? new chrome.declarativeContent.ShowAction()
        : new chrome.declarativeContent.ShowPageAction(),
    ],
  }]);
});

// SVG icons aren't supported yet
async function loadImageData(url) {
  const img = await createImageBitmap(await (await fetch(url)).blob());
  const {width: w, height: h} = img;
  const canvas = new OffscreenCanvas(w, h);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, w, h);
  return ctx.getImageData(0, 0, w, h);
}