Question

G Chrome扩展程序可以包含“browser action”。通常，当您单击它时，ext开发人员会显示选项，这意味着每个操作都需要2次点击，甚至是默认的99％的时间操作。 Chrome本身添加了一个上下文菜单，其中包含以下几个选项：禁用ext，卸载ext，转到ext主页等。

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

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

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

Answer 1

是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 2

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

但是，您可以使用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也可在弹出页面中使用。

PS。 manifest.json，因此您可以复制粘贴示例并使用此答案进行播放。

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

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»

的示例

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

3 个答案: