20

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

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

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

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

4

3 回答 3

50

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

清单.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');
      }
});

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

于 2014-11-05T15:21:09.613 回答
1

示例（几乎是模式）它还提供了一种使用简单的 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扩展树上下文菜单模式»的一些示例

于 2018-06-19T20:38:22.820 回答
-1

无法将任何自定义条目添加到上下文菜单。

但是，您可以使用 为按钮动态分配面板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"
    }
}
于 2013-10-19T17:31:21.427 回答