如何禁用(灰显)Chrome扩展的页面操作?

xsuvu9jc  于 2022-12-06  发布在  Go
关注(0)|答案(3)|浏览(223)

我希望除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()]
    }]);
  });
});

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.
有什么想法吗?

efzxgjgh

efzxgjgh1#

这是一个bug in Chrome,到目前为止还不清楚它是否可以修复。
同时,您可以自行维护图标:
1.在任何图像编辑器中制作图标的灰度版本并单独保存。

  • 指定manifest.json中的灰色图标:
  • 清单V2:
"page_action": {
  "default_icon": { "16": "icons/16-gray.png", "32": "icons/32-gray.png" }
}
  • 清单V3使用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);
}
yqyhoc1h

yqyhoc1h2#

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

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

然后图标会在URL中显示为灰色,表示没有权限和匹配。您可以在pageAction/#manifest中查看说明。
但是在manifest v3中,上面的配置似乎不再起作用。

kpbwa7wx

kpbwa7wx3#

Chrome在其文档中记录了这种行为:https://developer.chrome.com/docs/extensions/reference/action/#emulating-pageactions-with-declarativecontent。下面描述如何在manifest v3中实现它。

// background.js

chrome.runtime.onInstalled.addListener(() => {
  // disable the action by default
  chrome.action.disable();

  // remove existing rules so only ours are applied
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // add a custom rule
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // define the rule's conditions
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { hostSuffix: "reddit.com" },
          }),
        ],
        // show the action when conditions are met
        actions: [new chrome.declarativeContent.ShowAction()],
      },
    ]);
  });
});

这将需要manifest.json中的declarativeContent权限

{
  ...
  "permissions": ["declarativeContent"]
  ...
}

相关问题