如何为 Chrome 扩展禁用（变灰）页面操作？

Question

我希望 Chrome 扩展程序图标在除 docs.google.com 以外的所有页面上禁用（变灰）。这是我在 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中的灰色图标:

ManifestV2:

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

Answer 2

如果您使用清单版本 2，只需在 page_action 中声明彩色图标，而不是灰色图标。

// manifest.json
 "manifest_version": 2
 "page_action": {
   "default_icon": "icon-color.png"
 },

然后图标会在URL退出权限和匹配项时变成灰色。您可以在 pageAction/#manifest.

查看说明

但在清单 v3 中，上面的配置似乎不再有效。

如何为 Chrome 扩展禁用（变灰）页面操作？

How to disable (gray out) page action for Chrome extension?

google-chrome

google-chrome-extension