Chrome扩展程序
前次跟各人提到Chrome应用市肆，于是探究了一下开辟一个Chrome扩展程序有多难，颠末一番研究，发现着实并不难。下面就带你体验一下怎样开辟一个二维码天生插件。
起首创建一个目任命于存放Chrome扩展程序的全部资源，比如qrcode。目次创建好后，然后在这个目次中创建一个文件名为manifest.json的文件。这个文件用于存放程序的元信息：
{
"manifest_version":2,
"name":"QRCode",
"deion":"GenerateQRCodeforwebpage.",
"version":"1.0",
"browser_action":{
"default_icon":"icon.png",
"default_popup":"popup.html",
"default_title":"GenerateQRCode"
},
"permissions":[
"activeTab"
]
}
咱们来简单讲授一下这个清单文件。manifest_version表现清单版本号，如今用2即可。name,deion和version用于指定应用的名称，形貌和版本。
browser_action属性就是在欣赏器地点栏上面的按钮，它的子属性界说了按钮的图标，默认主页，标题等：
接下来的permissions用于界说扩展程序的权限，我们这里申请了activeTab权限，着实就是获取当前标签页的信息，用于天生二维码。
开始实践
预备工作完成了，我们起首要开辟popup.html,这个是我们扩展程序的主界面。没错，它着实就是一个html页面，由于扩展程序都是着实也都是Chrome内核来分析的，用web技能来开辟天然最符合不外。
!doctypehtml
html
head
titleQRCode/title
!--省略样式表代码--
src="jquery-3.2.1.min.js"/
src="jquery.qrcode.min.js"/
src="popup.js"/
/head
body
divid="title"QRCode/div
divid="url"/div
divid="image-result"style="width:270px;height:270px;"
/div
/body
/html
着实就是一个平凡的html页面，只要有根本的web开辟底子，具体这个都不丢脸懂。这里要说一下的就是引入的几个js文件。
一个是jQuery，是的你没看错，你可以利用jQuery来开辟Chrome程序。
别的一个我们必要的组件就是jquery.qrcode，它用来给指定的字符串天生二维码图片。这里不多讲授，有爱好的朋侪可以参考它的Github主页：https://github.com/jeromeetienne/jquery-qrcode。
然后就是popup.js,这是我们扩展程序的重要逻辑代码。
让我们再来看看它内里有什么：
functiongetCurrentTabUrl(callback){
varqueryInfo={
active:true,
currentWindow:true
};
chrome.tabs.query(queryInfo,function(tabs){
vartab=tabs[0];
varurl=tab.url;
console.assert(typeofurl=='string','tab.urlshouldbeastring');
callback(url);
});
}
起首界说一个getCurrentTabUrl函数，这个函数唯一的作用就是获取当前用户打开标签的URL地点。这里用到了Chrome的内部JS函数chrome.tabs.query。传入了两个参数，第一个queryInfo是查询条件，我们查询的是当前窗口的激活标签。
然后第二个参数是一个callback，查询乐成后，会吧相应的tab信息返回过来。我们取到这个tab的URL，然后再调用callback返回给调用方即可。
这里要说到一点，Chrome扩展程序的大多数接口都是异步调用的。就比如我们这次用到的chrome.tabs.query。好了，具体细节不再赘述，Chrome提供了非常丰富的API供我们调用。完备的API文档可以查询官方文档：https://developer.chrome.com/extensions/api_index
我们再继承看主程序：
functionrenderStatus(statusText){
document.getElementById('url').textContent=statusText;
}
document.addEventListener('DOMContentLoaded',function(){
getCurrentTabUrl(function(url){
renderStatus(url);
varresult=$('#image-result');
result.qrcode({
text:url
});
});
});
这里利用DOMContentLoaded变乱，在扩展程序打开的时间调用上面我们界说的getCurrentTabUrl方法获取当前标签的URL。然后利用这个URL调用jquery.qrcode的方法天生二维码图片并设置到我们html页面中image-result标签中。
renderStatus方法只是把URL表现到页面的标签上，信托你不丢脸懂。这里我们省略了CSS样式相干的代码，完备的代码我已经放到Github上，各人可以在这里看到https://github.com/swiftcafex/chrome-qrcode
开始调试
到此为止，我们这个简单的二维码扩展程序就开辟完成了。如今改把它安装到Chrome中体验一下了。我们如今的目次布局应该是如许的：
程序写好了，如今要办理的事变就是怎么把它安装到Chrome中。起首在Chrome的地点栏中输入chrome://extensions就可以打开扩展程序页面：
勾选上这个页面左上角的“开辟者模式”,然后就会出现上面的几个按钮。点击“加载已解压的扩展程序”,然后选择我们刚才创建的文件夹，如许就可以看到我们的扩展程序被导入进来了。这时间Chrome欣赏器的左上角就会出现扩展程序的图标了，点击它，我们的扩展程序就展示出来了：
假如你的扩展程序没有精确的弹出，你还可以右键点击它，然后选择“检察弹出内容”来打开调试界面，可以或许非常方便的帮你定位错误：
总结
是不是发现开辟一个Chrome扩展程序着实很简单呢？我们这内里只做到了开辟，然后在Chrome环境中举行调试。一个应用程序假如要创建起正常的生态，还必要提交到应用市肆中，背面我还会写一篇提交市肆的文章。假如你有什么创意或想法也欢迎留言交换。这个小程序的完备的代码已经在Github上面开源，盼望对你有所资助：
https://github.com/swiftcafex/chrome-qrcode
本文链接：https://wwwroot.co/xiao-bian-cheng-zuo-pin-de-jian-dan-xian-rong.html
下一篇：西瓜编程先容的简单先容
网友评论