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

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);}

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

我们可以看到的效果：

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

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

转载于:https://my.oschina.net/tearlight/blog/369013