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

Question

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

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

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

我在Chrome Extension dev guide 上找不到，但你比我知道的多。

Answer 1

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

但是，您可以使用chrome.browserAction.setPopup 为按钮动态分配面板。您可以使用options page 允许用户选择他们喜欢的选项（单击操作，或两次单击和多个操作）。选项页面距离按钮只有两下点击的距离这一事实也很不错。

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

background.js（用于您的event / background page）：

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 也可在弹出页面中使用。

附言。 manifest.json，因此您可以复制粘贴示例并使用此答案。

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

Answer 2

它是now possible，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"
    }
}

background.js：

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

请注意，如果您使用Event page，则不能使用onclick 属性；您需要改为向chrome.contextMenus.onClicked 添加一个侦听器。

Answer 3

示例（几乎是模式） 它还提供了一种使用简单的 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 extension tree context menu pattern»的一些示例