Chrome 擴充套件外掛開發DEMO

weixin_34041003發表於2017-08-18

任務背景

工作中常用到一些小工具，而網上現成的線上工具用起來不爽，於是想通過自己實現一些 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();