Chrome插件开发学习心得（四）之修改浏览器菜单

浏览器鼠标点击的触发事件除了工具栏以外，最为方便的就是右击菜单栏了。同时，Chrome浏览器插件开发也有关于修改菜单栏的API。这里可以自定义自己的菜单。

声明权限

在插件开发中，做很多操作都是需要权限的，如修改历史记录，修改收藏夹等等，这时候就需要声明权限，在manifest.json文件中。

<pre name="code" class="javascript">"permissions": [
    "contextMenus"
  ],

这里要注意，申明权限时，只能读取一条permissions，如果需要多个权限，在contextMenus后用“，”隔开，如下面

"permissions": [
    "contextMenus"
  ],
"permissions": [
    "history"
  ],

这种，就会出现，先申明contextMenus权限，又申明history（读取浏览记录）权限，这时候，history权限会覆盖contextMenus权限，正确的写法是

"permissions": [
    "contextMenus","history"
  ],

创建菜单

创建菜单只需要调用chrome中create方法,chrome.contextMenus.create(Object,function)

chrome.contextMenus.create({'title':'出境游项目',contexts:['all'],id:'inter',documentUrlPatterns:['http://*/*']});
chrome.contextMenus.create({'title':'新后台',contexts:['all'],id:'admin',parentId:"inter",documentUrlPatterns:['http://www.ly.com/*']});
chrome.contextMenus.create({'title':'老后台',contexts:['all'],id:'lineadmin',parentId:"inter",documentUrlPatterns:['http://www.ly.com/*']});
chrome.contextMenus.create({'title':'CN站',contexts:['all'],id:'cn',parentId:"inter",documentUrlPatterns:['http://www.ly.com/*']});

这里就创建一个菜单，网页上右击，首先是出境游项目菜单，然后是三个子菜单，注意，这里只有在www.ly.com 网页上才会出现三个子菜单，因为这里加了限制，配了documentUrlPatterns属性。create方法中一共两个参数，一个是设置菜单属性，另一个是回调函数。注意，这个回调函数是异步加载的，用的时候注意调用顺序。

菜单属性一共有如下几项：

type：用于配置菜单项类型有四种（“normal”，“checkbox”，“radio”，“separator”），默认normal

id：菜单项唯一标示

title：菜单显示的中文

checked（boolean）：菜单项初始化状态是否为选中

contexts：列出菜单项将会在哪些位置右击出现（“all”所有“page”页面“frame”框架“selection”选定内容“link”链接“editable”可编辑内容“image”图片“video”视屏“audio”音频“launcher”）

parentId：父菜单的唯一标示id，用于添加子菜单

documentUrlPatterns：限制菜单在匹配的url中显示，也就是我上面用到的那个。

enabled：设置菜单是启用还是禁用

修改菜单

调用chrome中update方法

chrome.contextMenus.update(id,Object,function);

id：为要修改的菜单项的唯一id

Object：该参数同上面参数

function：回调方法

删除菜单

调用remove方法，系统菜单神马的可以删不掉的，只能删除自己创建的

chrome.contextMenus.remove(id,function);

id：要删除菜单项的id

function：回调方法

监听事件

菜单创建了，但是功能却没有实现，这时候，我们就需要考虑监听器了，其中有addListener方法，在background文件中加监听事件

chrome.contextMenus.onClicked.addListener(function(info,tab){
    if(info.menuItemId === 'admin')
    {
        console.log('admin');
    }
    if(info.menuItemId === 'lineadmin')
    {
        console.log('lineadmin');
    }
});

通过唯一id确定选择的项，再进行操作。info.*中参数有：

menuItemId:单机的菜单项唯一标示id

parentMenuItemId：单机的菜单项的父菜单id

mediaType：如果右击是在图片，视屏或者音频上则值对应为“image”，“video”或“audio”

linkUrl：激活的元素是链接，则为链接地址

srcUrl：激活元素src属性指向的url地址

pageUrl：当前打开的页面的url地址

frameUrl：当前框架的url地址

selectionText：当前选中的文本内容（如果有）

editable：是否可编辑

wasChecked：表示单机前当前复选框或者单选框是否是选中状态

checked：表示单机后复选框或者单选框状态

tab.*中参数有：

id：当前标签页id

index：标签页所在窗口索引

windowId：标签页所在窗口的id

url：当前标签页地址

title：标签页标题

（其他的api查吧，太多了。。。）

最后就是这个简单的demo：http://pan.baidu.com/s/1mgMdMek

秒客网