本节主要介绍如何在Google Chrome浏览器web页面上点击右键弹出自定义菜单,即如何使用谷歌Context Menus API接口。上节已经把主要流程介绍了,这节就直接上代码,代码都是官方例子没有实际意义,但是可以起到抛砖引玉的作用,大家根据自己的需要开发出自己想要的功能才是王道。

manifest.json代码如下:

{
"name": "Context Menus Sample",
"description": "Shows some of the features of the Context Menus API",
"version": "0.6",
"permissions": ["contextMenus"],
"background": {
"scripts": ["sample.js"]
},
"manifest_version": 2
}

sample.js代码如下:

// Copyright (c) 2010 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.  // A generic onclick callback function.
function genericOnClick(info, tab) {  console.log("item " + info.menuItemId + " was clicked");  console.log("info: " + JSON.stringify(info));  console.log("tab: " + JSON.stringify(tab));
}  // Create one test item for each context type.
var contexts = ["page","selection","link","editable","image","video",  "audio"];
for (var i = 0; i < contexts.length; i++) {  var context = contexts[i];  var title = "Test '" + context + "' menu item";  var id = chrome.contextMenus.create({"title": title, "contexts":[context],  "onclick": genericOnClick});  console.log("'" + context + "' item:" + id);
}  // Create a parent item and two children.
var parent = chrome.contextMenus.create({"title": "Test parent item"});
var child1 = chrome.contextMenus.create(
{"title": "Child 1", "parentId": parent, "onclick": genericOnClick});
var child2 = chrome.contextMenus.create(  {"title": "Child 2", "parentId": parent, "onclick": genericOnClick});
console.log("parent:" + parent + " child1:" + child1 + " child2:" + child2);  // Create some radio items.
function radioOnClick(info, tab) {  console.log("radio item " + info.menuItemId +  " was clicked (previous checked state was "  +  info.wasChecked + ")");
}
var radio1 = chrome.contextMenus.create({"title": "Radio 1", "type": "radio",  "onclick":radioOnClick});
var radio2 = chrome.contextMenus.create({"title": "Radio 2", "type": "radio",  "onclick":radioOnClick});
console.log("radio1:" + radio1 + " radio2:" + radio2);  // Create some checkbox items.
function checkboxOnClick(info, tab) {  console.log(JSON.stringify(info));  console.log("checkbox item " + info.menuItemId +  " was clicked, state is now: " + info.checked +  "(previous state was " + info.wasChecked + ")");  }
var checkbox1 = chrome.contextMenus.create(  {"title": "Checkbox1", "type": "checkbox", "onclick":checkboxOnClick});
var checkbox2 = chrome.contextMenus.create(  {"title": "Checkbox2", "type": "checkbox", "onclick":checkboxOnClick});
console.log("checkbox1:" + checkbox1 + " checkbox2:" + checkbox2);  // Intentionally create an invalid item, to show off error checking in the
// create callback.
console.log("About to try creating an invalid item - an error about " +  "item 999 should show up");
chrome.contextMenus.create({"title": "Oops", "parentId":999}, function() {  if (chrome.extension.lastError) {  console.log("Got expected error: " + chrome.extension.lastError.message);  }
});  

插件加载流程参考:http://blog.csdn.net/anda0109/article/details/50325849

Google Chrome插件开发-Context Menus相关推荐

  1. Google Chrome 插件开发: 无法建立连接, 接收端不存在. Could not establish connection. Receiving end does not exist

    通过以下代码向当前页面发送 "start" 消息: chrome.tabs.query({active: true,currentWindow: true}, tabs => ...

  2. Google Chrome 浏览器插件开发学习

    2014/11/16 Google Chrome 浏览器插件开发学习 因笔记存有文件,不便发表在cnblogs上,请到evernote里找笔记 "Google Chrome 浏览器插件开发学 ...

  3. Chrome插件开发之一: 搭建基本结构

    Chrome插件开发之一: http://gdfans.net/?p=14 搭建基本结构 作者:cmdbuf 发布时间:2010年05月28日 发表评论 (6) 4阅读评论 欢迎喜爱Chrome的谷友 ...

  4. Chrome 插件开发与本地程序交互流程

    Chrome 插件开发与本地程序交互流程 一. 将本地程序写入注册表 可以采用bat的方式写入注册表 REG ADD "HKCU\Software\Google\Chrome\NativeM ...

  5. 浙大教务网登录验证码自动填充--chrome插件开发

    浙大教务网登录验证码自动填充--chrome插件开发 一.前言 二.验证码图像识别 三.chrome插件开发 四.插件使用和结果展示 五.未来展望 六.提示 一.前言 女朋友说"教务网每次登 ...

  6. chrome浏览器内存_如何在Google Chrome浏览器中清除内存

    chrome浏览器内存 The latest development builds of Google Chrome include a way to make the browser clean u ...

  7. Chrome 插件开发小记

    文章目录 前言 manifest.json 常用配置项 常用API 脚本注入 网站与插件通信 网站端 插件端 打包 .crx QA 其他参考链接 前言 群里闲逛,看见有人发了个图,感觉还挺有意思,抽空 ...

  8. Chrome插件开发实例---刷论坛在线时间小程序

    前记: 由于近日注册了某个技术论坛,其论坛要求转为正式会员必须50积分购买邀请号,回答官方预留的题目可以获得30积分,每日在线一小时可以获得1积分上限为5积分.本人回答了官方题目获得30积分,之后就只 ...

  9. Google Chrome浏览器将阻止混合内容–您准备好了吗?

    Recently, Google Chrome announced that they will soon start blocking mixed content also known as ins ...

最新文章

  1. laravel使用redis做缓存的方法
  2. ML之sklearn:sklearn的make_pipeline函数、RobustScaler函数、KFold函数、cross_val_score函数的代码解释、使用方法之详细攻略
  3. linux 普通io实现pwm,用普通IO口做PWM输出 - 51单片机 - 电子工程世界-论坛 - 手机版...
  4. 徐州初中计算机学校排名2015,徐州初中学校排名,徐州重点初中排名详细榜单
  5. 用PHP的CURL写的一个采集Discuz的例子
  6. Matplotlib 中文用户指南 4.7 使用 LaTeX 渲染文本
  7. Linux命令:SAMBA配置与win10共享
  8. UVA10570 Meeting with Aliens【数学计算】
  9. Atitit 前端技术体系 目录 1. 基础系列 2 1.1. NUI CLI GUI 2 1.2. MVC WEBFORM PAGE模式 stage模式 2 2. 技术应用系列 2 2.
  10. MySql 分数排名
  11. 【项目管理工具】—— Microsoft Office Project 介绍
  12. access specifier
  13. JavaScript面试题大全之基础面试题(附答案)
  14. 戴尔笔记本电脑USB口失灵
  15. C语言中的EOF和feof()
  16. Redis集群之多主多从
  17. android手机配什么蓝牙耳机,安卓手机配什么蓝牙耳机好?安卓系统蓝牙耳机推荐!...
  18. 熬夜整理的一份elasticsearch中文文档手册
  19. 3DsMax2015-2019-2021 安装 NumPy
  20. SQL Server数据库(郝斌)---T-SQL 数据查询语言

热门文章

  1. NS3 Tutorial 中文版:第三章 快速上手
  2. 推荐的这22个高频 CLI 工具,确定不收藏吗?
  3. 多智能体协同控制(从零开始)(一)
  4. 4G DTU和4G工业路由器有哪些区别?
  5. win10计算机的管理在哪里打开,Win10磁盘管理器
  6. stamps中gacos去除大气噪声
  7. 糟糕,系统又被攻击了
  8. 产品经理必看电影:当幸福来敲门
  9. 计算广告小窥[中]这孙子怎么什么都知道
  10. 【List】个人 常用学习工作软件清单