首页 > 代码库 > Chrome插件开发 小插件-acfun看图 2

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的坑给填了。


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