开发一个 Chrome 扩展程序, 其实非常简单,而且很有趣。
Chrome 扩展程序
上次跟大家提到 Chrome 应用商店,于是探究了一下开发一个 Chrome 扩展程序有多难, 经过一番研究,发现其实并不难。 下面就带你体验一下如何开发一个二维码生成插件。
首先创建一个目录用于存放 Chrome 扩展程序的所有资源,比如 qrcode。 目录创建好后,然后在这个目录中创建一个文件名为 manifest.json 的文件。 这个文件用于存放程序的元信息:
{
"manifest_version": 2,
"name": "QR Code",
"description": "Generate QR Code for web page.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Generate QRCode"
},
"permissions": [
"activeTab"
]
}
咱们来简单讲解一下这个清单文件。 manifest_version 表示清单版本号,目前用 2 即可。 name , description 和 version 用于指定应用的名称,描述和版本。
browser_action 属性就是在浏览器地址栏上面的按钮, 它的子属性定义了按钮的图标,默认主页,标题等:
接下来的 permissions 用于定义扩展程序的权限,我们这里申请了 activeTab 权限,其实就是获取当前标签页的信息,用于生成二维码。
开始实践
准备工作完成了, 我们首先要开发 popup.html, 这个是我们扩展程序的主界面。 没错,它其实就是一个 html 页面,因为扩展程序都是其实也都是 Chrome 内核来解析的,用 web 技术来开发自然最合适不过。
<!doctype html>
<html>
<head>
<title>QR Code</title>
<!-- 省略样式表代码 -->
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="title">QR Code</div>
<div id="url"></div>
<div id="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){
var queryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(queryInfo, function(tabs){
var tab = tabs[0];
var url = tab.url;
(责任编辑:admin)