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

问题

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

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.

Any ideas on this?

回答1:

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

Meanwhile, you can maintain the icon yourself:

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

specify the gray icon in in manifest.json:

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

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

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

来源：https://stackoverflow.com/questions/64473519/how-to-disable-gray-out-page-action-for-chrome-extension

标签

google-chrome

google-chrome-extension