代码之家 › 专栏 › 技术社区 › kojow7

在Google Chrome扩展中添加子上下文菜单

google-chrome

kojow7 · 技术社区 · 7 年前

我目前可以在Google Chrome扩展中创建一个contextMenu(右键单击菜单),如下所示:

chrome.contextMenus.create({
  title: "The name to click",
  contexts:["selection"],
  onclick: theFunctionToRun
});

然而,我希望能够添加一个子菜单的上下文菜单。我正在实现10个工具,可以通过右键菜单调用,但希望有2个菜单,每个菜单中有5个工具,根据它们的分类。

我还没有在网上或文档中找到任何有关这方面的信息。我很惊讶其他人也不想要这个功能,所以也许我只是在寻找错误的东西。

是否可以创建子菜单的上下文菜单?如果是这样,我该怎么做?

4 回复 | 直到 7 年前

kojow7 7 年前

chrome.contextMenus.create({
  title: "The name of the parent menu",
  id: "parent",
  contexts:["selection"]
});

chrome.contextMenus.create({
  title: "The first action to click",
  parentId: "parent",
  contexts:["selection"],
  onclick: theFirstFunction
});

chrome.contextMenus.create({
  title: "The second action to click",
  parentId: "parent",
  contexts:["selection"],
  onclick: theSecondFunction
});

Omar Aflak 4 年前

基本上,上述答案的组合对我有效。这是我的示例(有两种创建菜单的方法-在var中声明或直接在中使用) chrome.contextMenus.create ) :

var contextMenuItem = {
    "id": "addRecipe",
    "title": "Add Recipe",
    "contexts": ["selection"]
};

chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.create({
    title: "Add new recipe name",
    parentId: "addRecipe",
    id: "name",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add shopping list",
    parentId: "addRecipe",
    id: "list",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add ingredients",
    parentId: "addRecipe",
    id: "ingredients",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add cooking steps",
    parentId: "addRecipe",
    id: "steps",
    contexts:["selection"]
});

Alex Gallacher 7 年前

它可能更简单一点。首先,我承认这不是我的原始代码,但是,子菜单位是。 https://www.youtube.com/watch?v=DH7QVll30XQ 还有他的Github回购 https://github.com/gopinav/Chrome-Extensions . 这里“我是如何更改事件页面的”只是添加了另一个上下文菜单项。

    var priceItem = {
    "id": "saveAsPrice",
    "title": "Save as Price",
    "contexts": ["selection"]
};

var nameItem = {
    "id": "saveAsName",
    "title": "Save as Name",
    "contexts": ["selection"]
};


chrome.contextMenus.create(priceItem);
chrome.contextMenus.create(nameItem);

Chrome Extension Context submenu

Simon Ugorji 2 年前

对于 MV3 您可以添加 子菜单

const menuId = "myMenu";

function callback1(){
  console.log('my first callback');
};

function callback2(){
  console.log('my second callback');
};

//primary menu
chrome.contextMenus.create({
  id : menuId,
  title : "Menu Name",
  contexts : ["all"]
});

//sub-menu
chrome.contextMenus.create({
  id : "myMenuSub1",
  parentId : menuId,
  title : "An Action",
  contexts : ["all"]
}, callback1);

//sub-menu
chrome.contextMenus.create({
  id : "myMenuSub2",
  parentId : menuId,
  title : "Another Action",
  contexts : ["all"]
}, callback2);

ONCLICK事件

chrome.contextMenus.onClicked.addListener((info, tab) => {
  console.log(info);
  console.log(tab);
});

这个信息参数返回包含上下文菜单项数据的对象。您可以使用它检查单击的子菜单项,然后对其执行操作。

信息预览

选项卡 回调参数返回一个对象,该对象包含单击子菜单项的当前选项卡。

在Google Chrome扩展中添加子上下文菜单

ONCLICK事件

信息预览

选项卡预览