Chrome 扩展插件开发DEMO

任务背景

工作中常用到一些小工具，而网上现成的在线工具用起来不爽，于是想通过自己实现一些 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 :



    
        
        
        
        QR Code Generator

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