右键菜单

通过开发Chrome插件可以自定义浏览器的右键菜单，主要是通过chrome.contextMenusAPI实现，右键菜单可以出现在不同的上下文，比如普通页面、选中的文字、图片、链接，等等，如果有同一个插件里面定义了多个菜单，Chrome会自动组合放到以插件名字命名的二级菜单里，如下：

右键菜单 - 图1

最简单的右键菜单示例

  1. // manifest.json
  2. {"permissions": ["contextMenus"]}
  4. // background.js
  5. chrome.contextMenus.create({
  6.  title: "测试右键菜单",
  7.  onclick: function(){alert('您点击了右键菜单！');}
  8. });

效果：

右键菜单 - 图2

添加右键百度搜索

  1. // manifest.json
  2. {"permissions": ["contextMenus"， "tabs"]}
  4. // background.js
  5. chrome.contextMenus.create({
  6.  title: '使用度娘搜索：%s', // %s表示选中的文字
  7.  contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
  8.  onclick: function(params)
  9.  {
  10.  // 注意不能使用location.href，因为location是属于background的window对象
  11.  chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
  12.  }
  13. });

效果如下：

右键菜单 - 图3

语法说明

这里只是简单列举一些常用的，完整API参见：https://developer.chrome.com/extensions/contextMenus

  1. chrome.contextMenus.create({
  2.  type: 'normal'， // 类型，可选：["normal", "checkbox", "radio", "separator"]，默认 normal
  3.  title: '菜单的名字', // 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本
  4.  contexts: ['page'], // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page
  5.  onclick: function(){}, // 单击时触发的方法
  6.  parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单
  7.  documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单
  8. });
  9. // 删除某一个菜单项
  10. chrome.contextMenus.remove(menuItemId)；
  11. // 删除所有自定义右键菜单
  12. chrome.contextMenus.removeAll();
  13. // 更新某一个菜单项
  14. chrome.contextMenus.update(menuItemId, updateProperties);