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

最新推荐文章于 2022-12-27 15:11:53 发布

weixin_34235457

最新推荐文章于 2022-12-27 15:11:53 发布

阅读量516

点赞数

原文链接：https://my.oschina.net/tearlight/blog/369013

版权

2019独角兽企业重金招聘Python工程师标准>>>

因为个人爱好并且工作中有这样的一个需求：用手机测试开发好的页面时，要将地址传到手机去测试。虽然有很多的方法，比如用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);

}

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