chrome插件-显示在地址栏的二维码

原创
2015/01/18 12:42
阅读数 3.4K

    因为个人爱好并且工作中有这样的一个需求:用手机测试开发好的页面时,要将地址传到手机去测试。虽然有很多的方法,比如用qq、360浏览器的传送等,但是觉得挺麻烦的,于是就自己折腾了这么一个插件。本文主要是学习chrome插件的开发,实现一个在地址栏添加一个图标,点击后显示当前url的二维码图片,其中包括了图标的设置,当前tab一些信息的读取,二维码的生成等。

    在此之前,不需要了解一些关于chrome插件开发的知识,谷歌的文档当然是最全的,但是访问成了问题,国内的我推荐360的,http://open.chrome.360.cn/extension_dev/overview.html,这个网站的很不错。如果你不喜欢看这些文档,那么也可以直接从代码入手,O(∩_∩)O~

    一下的步骤是以我的插件开发为例。

    第一,准备一些基本材料,建立manifest.json文件。

    要准备的东西就是图标,因为插件都需要一个图标,如果没有也可以,毕竟为了区别开其他的插件,我觉得这个是有必要的。这里需要提供一个128x128的图标,这个图标将在webstore安装时候使用。扩展需要一个48x48的图标,扩展管理页面需要这个图标。同时,你还可以提供给一个16x16的图标作为扩页面的fa网页图标 。

    如果没有合适的图标可以后续添加,到这里可以添加manifest.json文件了,这个文件是必须要有的,因为这个文件告诉浏览器你这个插件的所有信息。关于这个文件中的  name 、version、description 这些设置都比较简单,而manifest_version目前默认是2,其他的就要根据实际情况来设置了,我的设置如下图:

    第二、添加一些基本的文件

    首先需要添加一个 background.js这是用来监听页面变化用的。还要添加一个popup页面文件popup.html,这个文件是点击图标后显示的弹窗页面,至于要在里面实现什么东西,可以在这页面再引用。基本的文件就是这两个了,是不是有点简答,O(∩_∩)O~

    第三、修改background.js,实现页面加载时地址栏加载图标    

    在修改之前,应该往manifest.json文件里面添加了permissions的选项,增加declarativeContent tabs这两项,因为我们监听页面时会需要用到这两个,上图可见,我已经添加进去了O(∩_∩)O~

    那么接着就是background.js的代码了,我们需要用到 chrome.runtime.onInstalled.addListener 来监听页面初始化加载,通过chrome.declarativeContent.onPageChanged的一些方法来规定图标在什么时候显示,我这里需要的是urld的schemes必须包含http或https才能显示,代码如下:

chrome.runtime.onInstalled.addListener(function() {
    // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { schemes:['https','http'] },
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

    其实这段代码是从官方deom中copy过来然后再修改一下...

    这样就可以实现了地址栏图标的添加了。

    第四、修改弹出框页面popup.html

    popup.html没有太多的修饰,但是要实现二维码,这里引用了jquery  jquery.qrcode.js 来实现。关于 jquery.qrcode.js 的用法,需要详细了解的自己百度一下,这里就不多说了。值得注意的是不能在页面里面写js,chrome是禁止这么做的,那么要在这里引入一个js文件来操作页面的dom,于是就需要增加一个popup.js。文件代码如下:


<!doctype html>
<html>
  <head>
    <title>二维码</title>
    <script src="src/jquery-2.1.3.min.js"></script>
    <script src="src/jquery.qrcode.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
  	<div id="qrcode"></div>
  </body>
</html>



    第五、修改popup.js来实现二维码的显示


    通过chrome.windows.getCurrent来获取当前的窗体,通过chrome.tabs.getSelected来获取当前页面,通过jQuery('#qrcode').qrcode来绘制二维码。这里我还添加了一个drawImg方法,将网站的favIcon画在二维码的中间O(∩_∩)O~,具体实现的代码如下:


chrome.windows.getCurrent(function(win){ 
	chrome.tabs.getSelected(function(tab){ 
		var img,_width=160,_height=160;

		//console.log(tab);
		jQuery('#qrcode').qrcode({width:_width,height:_height,text:tab.url});

		if(tab.favIconUrl){
			img = new Image();
			img.src = tab.favIconUrl;
			img.onload=function(){ 
				var _w = img.width,_h = img.height
					,_x = 0 ,_y = 0
				;
				if(_w && _h){ 
					drawImg(img,(_width-_w)/2,(_height-_h)/2)
				}
			}
		}
	})
});

//加入图片
function drawImg(img,x,y){ 
	var myCanvas = document.getElementsByTagName('canvas')
		,_canvas = myCanvas[0]
		,myctx = _canvas.getContext('2d')
	;
	myctx.drawImage(img,x||0,y||0);

}


    最后,我们就可以进行调试了,调试的方法是在扩展程序中“加载正在开发的扩展程序”,如下

    我们可以看到的效果:

    

    O(∩_∩)O~这样,一个简单的插件就实现了,本插件已经提交到了git.oschina.net,感兴趣的朋友可以去看看,传送门。希望能给像我一样努力的菜鸟一些帮助,欢迎大家指教!

    本文同步在我的个人博客发布 http://www.subying.com/archives/96.html


展开阅读全文
打赏
0
10 收藏
分享
加载中
赞一个
2015/01/25 00:15
回复
举报
好文啊
2015/01/19 08:02
回复
举报
更多评论
打赏
2 评论
10 收藏
0
分享
返回顶部
顶部