将上下文菜单项添加到 Chrome 扩展程序的浏览器操作按钮

Question

G Chrome 扩展程序可以有“浏览器操作”。通常，当您单击 ext 开发人员时，它会显示选项，这意味着每个操作都需要单击 2 次，即使是默认的 99% 操作也是如此。 Chrome 本身添加了一个上下文菜单，其中包含一些选项：禁用 ext、卸载 ext、转到 ext 主页等。

作为 ext 开发人员，我可以将项目添加到该上下文菜单中，以便我可以在正常/左键/主鼠标单击下保持一键单击操作吗？

我知道 chrome.contextMenus 但这仅适用于页面中的上下文菜单（请参阅属性“contexts”）。

我在 Chrome 扩展开发指南中找不到它，但你比我知道的更多。

Answer 1

它是现在可能，AdBlock chrome 扩展拥有它。下面是“浏览器操作中的上下文菜单”的工作示例。

manifest.json：

{
    "name": "Custom context menu in browser action",
    "version": "1",
    "manifest_version": 2,
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_title": "Some tooltip",
      "default_popup": "popup.html"
    },
    "permissions": [
      "contextMenus"
    ],
    "icons": {
      "16": "icon16.png"
    }
}

背景.js：

chrome.contextMenus.removeAll();
chrome.contextMenus.create({
      title: "first",
      contexts: ["browser_action"],
      onclick: function() {
        alert('first');
      }
});

请注意，如果您使用活动页面，则无法使用

onclick

属性；您需要向

chrome.contextMenus.onClicked

添加一个侦听器。

Answer 2

示例（几乎是模式） 它还提供了使用简单 onclick 侦听器（此处短属性“act”）的解决方法，目前如果您使用“事件页面”，则无法使用本机 onclick

const menuA = [
  { id: 'ItemF', act: (info, tab) => { console.log('Clicked ItemF', info, tab, info.menuItemId); alert('Clicked ItemF') } },
  { id: 'ItemG', act: (info, tab) => { console.log('Clicked ItemG', info, tab, info.menuItemId); alert('Clicked ItemG') } },
  { id: 'ItemH', act: (info, tab) => { console.log('Clicked ItemH', info, tab, info.menuItemId); alert('Clicked ItemH') } },
  { id: 'ItemI', act: (info, tab) => { console.log('Clicked ItemI', info, tab, info.menuItemId); alert('Clicked ItemI') } },
];

const menuB = [
  { id: 'ItemJ', act: (info, tab) => { console.log('Clicked ItemJ', info, tab, info.menuItemId); alert('Clicked ItemJ') } },
  { id: 'ItemK', act: (info, tab) => { console.log('Clicked ItemK', info, tab, info.menuItemId); alert('Clicked ItemK') } },
  { id: 'ItemL', act: (info, tab) => { console.log('Clicked ItemL', info, tab, info.menuItemId); alert('Clicked ItemL') } },
  { id: 'ItemM', act: (info, tab) => { console.log('Clicked ItemM', info, tab, info.menuItemId); alert('Clicked ItemM') } },
];


const rootMenu = [
  //
  // In real practice you must read chrome.contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
  //
  { id: 'ItemA', act: (info, tab) => { console.log('Clicked ItemA', info, tab, info.menuItemId); alert('Clicked ItemA') }, menu: menuA },
  { id: 'ItemB', act: (info, tab) => { console.log('Clicked ItemB', info, tab, info.menuItemId); alert('Clicked ItemB') }, menu: menuB },
  { id: 'ItemC', act: (info, tab) => { console.log('Clicked ItemC', info, tab, info.menuItemId); alert('Clicked ItemC') } },
  { id: 'ItemD', act: (info, tab) => { console.log('Clicked ItemD', info, tab, info.menuItemId); alert('Clicked ItemD') } },
  { id: 'ItemE', act: (info, tab) => { console.log('Clicked ItemE', info, tab, info.menuItemId); alert('Clicked ItemE') } },
];


const listeners = {};

const contexts = ['browser_action'];

const addMenu = (menu, root = null) => {

  for (let item of menu) {

    let {id, menu, act} = item;

    chrome.contextMenus.create({
      id: id,
      title: chrome.i18n.getMessage(id),
      contexts: contexts,
      parentId: root
    });

    if (act) {
      listeners[id] = act;
    }

    if (menu) {
      addMenu(menu, id);
    }
  }

};

addMenu(rootMenu);

chrome.contextMenus.onClicked.addListener((info, tab) => {
  console.log('Activate „chrome.contextMenus -> onClicked Listener“', info, tab);
  listeners[info.menuItemId] (info, tab);
});

查看一些示例 «chrome 扩展树上下文菜单模式»

Answer 3

asdjfiasd 的 2023/Manifest v3 版本的答案类似，只不过需要删除清单中的“browser_action”属性，并且需要使用

context_type

的

"action"

，而不是

"browser_action"

。

换句话说，这两个文件看起来像这样：

manifest.json

{
    "name": "Custom context menu in browser action",
    "version": "1",
    "manifest_version": 3,
    "background": {
      "scripts": ["background.js"]
    },
    "permissions": [
      "contextMenus"
    ],
    "icons": {
      "16": "icon16.png"
    }
}

背景.js

chrome.contextMenus.removeAll();
chrome.contextMenus.create({
      title: "first",
      contexts: ["action"],
      onclick: function() {
        alert('first');
      }
});

Answer 4

不可能将任何自定义条目添加到上下文菜单。

但是，您可以使用

chrome.browserAction.setPopup

动态地将面板分配给按钮。您可以使用选项页面允许用户选择他们的首选选项（单击操作或双击和多次操作）。事实上，选项页面距离按钮只需点击两次，这一点也相当不错。

这里的示例代码说明了在面板和单击之间切换的概念。

background.js

（在您的活动 / 背景页面中使用）：

chrome.browserAction.onClicked.addListener(function() {
    // Only called when there's no popup.
    alert('Next time you will see a popup again.');
    chrome.browserAction.setPopup({
        popup: 'popup.html'
    });
});

popup.html

，仅用于演示（使用CSS使其看起来更好）：

<button>Click</button>
<script src="popup.js"></script>

popup.js

，仅用于演示。由于 CSP，JavaScript 必须放置在单独的文件中。

document.querySelector('button').onclick = function() {
    chrome.browserAction.setPopup({
        popup: '' // Empty string = no popup
    });
    alert('Next time, you will not see the popup.');
    // Close panel
    window.close();
};

正如您在此示例中所看到的，

chrome.browserAction.setPopup

也可以在弹出页面中使用。

PS。

manifest.json

，这样您就可以复制粘贴示例并使用这个答案。

{
    "name": "Test badge - minimal example",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_title": "Some tooltip"
    }
}