Chrome插件开发 小插件-acfun看图 2

继续，然后才是重点，关于右键菜单，右键菜单的创建使用chrome.contextMenus.create（）函数。而要新建一个js文件来存放这些函数。

这些函数以及事件响应都是要在浏览器运行时调用，所以要在manifest中的 "background" 项中的   "scripts"中加上js项，表示这些是浏览器运行是的背景为这些js，即这些js一直在运行监听。

     "background": {
    "scripts": ["menu.js"]
  },

chrome插件代码中很多这种项定义的内容都是枚举，使用[]来装。

然后是看图插件的右键菜单以及操作代码：

chrome.contextMenus.create({//右键菜单的创建
"title" : "ACfun看图",//标题
"type" : "normal", //类型，默认为normal
"documentUrlPatterns":["http://www.acfun.tv/*"],//匹配，只在匹配的URI中触发右键菜单。
"targetUrlPatterns":["http://*/*"],//与<span style="font-family: Arial, Helvetica, sans-serif;">documentUrlPatterns类似</span>
"contexts":["link","image"],//右键响应的条件，只能对于页面中的 link以及image类型的对象可以使用右键菜单。
"onclick" : function(info ,tab){//点击右键菜单触发时间
//info为 右键点击出的上下文 可以获得选择对象的地址

//tab为 页面标签，可以获得页面地址
//info中有两个地址，一个图片的地址srcUrl，一个连接的地址linkUrl
if(info.srcUrl == null){//对于对象属性没有srcUrl时，即对象为连接，这里做对象是连接还是图片的判断。当属性不存在是，为null。
     var uri = info.linkUrl;
uri = uri.replace(".jpg",".jpeg");//替换，对于那些不能显示的图片，要改后缀名，而我做这个插件也就是为了这一步。
chrome.windows.create({//创建窗口
url :uri //url
},function(){});//函数后面都有一个functon(){},这个应该标识执行函数的意思吧。
}
else{
 var uri = info.srcUrl;
uri = uri.replace(".jpg",".jpeg");
chrome.windows.create({
url :uri
},function(){});

} 

}
},function(){});
     

这里也没有什么太复杂的东西，最终我完整的实现了自己最初的目的。

效果图：

chrome插件复杂的东西我也没有太过于专研，写一个小东西就够了。等有空再去把以前挖的android的坑给填了。