任务背景
工作中常用到一些小工具，而网上现成的在线工具用起来不爽，于是想通过自己实现一些 Chrome 扩展插件来解决这些问题。
任务目标
通过chrome插件，一键生成浏览器当前网页链接地址的二维码。
工程结构
---
--- icon.png
--- manifest.json
--- popup.html
--- js
--- popup.js
--- qrcode.min.js
icon.png 是 Chrome 插件图标；
manifest.json 是配置文件；
popup.html 是插件弹出页；
js 是 JavaScript 脚本存放目录；
popup.js 是插件弹出页JS脚本；
qrcode.min.js 是二维码生成JS工具库。
素材资源
-
icon.png
在 iconfont 上找合适的图标：http://www.iconfont.cn -
JavaScript 版二维码工具库：
qrcode.js 官网主页：https://davidshimjs.github.io/qrcodejs
主要代码
manifest.json :
{
"manifest_version": 2,
"name": "QR Code generator",
"description": "Dotions - 二维码生成器",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "点这里生成当前页二维码！"
},
"content_security_policy": "script-src 'self'; object-src 'self'",
"permissions": ["activeTab","tabs"]
}
popup.html :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR Code Generator</title>
<script type="text/javascript" src="js/qrcode.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div style="width:150px;" id="qr_code"> </div>
</body>
</html>
popup.js :
function load() {
window.console.info('ready.....');
// 获取到当前激活态的 tab 对象
chrome.tabs.query({
"active" : true
}, function(tabArr) {
var tab = tabArr[0];
window.console.info("title=" + tab.title);
window.console.info("url=" + tab.url);
var qrcode = new QRCode(document.getElementById("qr_code"), {
width: 150,
height: 150,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
qrcode.clear();
qrcode.makeCode(tab.url);
});
};
window.onload = load();
加载插件 & 调试
打开chrome 插件管理器
在chrome地址栏中输入以下地址打开插件管理器：
chrome://extensions
打开开发者模式
打开开发者模式
加载已写好的插件
加载已写好的插件
效果演示
点击自己的二维码图标，生成了一个当前页的二维码：
效果展示
打包插件
打包插件1
打包插件2
在项目路径上层路径下会生成两个文件：project_name.crx, project_name.pem
打包插件3
到此插件开发完成。
网友评论