從小目標開始，編寫一個簡潔的二維碼chrome擴展

時間 2019-11-06

原文原文鏈接

小需求小目標

開發目的：由於平時在電腦端須要發送些連接啊，或者文字到手機上時每次都要打開qq，特別是有時候電腦斷網了，顯得特別麻煩，因此開發了此插件。javascript

最終效果圖：css

下面講述編碼過程

小需求須要個二維碼生成插件，這裏引用 qrcode.js。有了現有的二維碼插件就簡單了；
chrome擴展編寫並非很難的事情，通常一個manifest.json文件，一個popup.html文件就能夠搞定，若是須要配置，再增長一個options.html文件；固然根據需求還能夠增長其餘的文件。html

首先建立一個 manifest.json文件java

編寫 manifest.json 文件git

{   //這裏必須是2
    "manifest_version": 2,
    //擴展名稱
    "name": "QRcode tool",
    //擴展版本
    "version": "1.0",
    //擴展描述
    "description": "一個簡潔的二維碼生成工具，簡單實用，小巧玲瓏。",
    //擴展圖標(在擴展中心顯示)
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon128.png",
        "128": "images/icon128.png"
    },
    //配置頁面
    "options_page": "options.html",//配置項頁面
    //擴展圖標配置
    "browser_action": {
        "default_popup": "popup.html",
        "default_titlec": "QRcode tool",
        "default_icon": {
            "16": "images/icon16.png"
        }
    },
    //權限聲明
    "permissions":["tabs"]
}

這文件配置須要注意的問題：github

嚴格的json格式，key/val均須要採用雙引號，最後的項後面不能有逗號,。chrome
擴展的一些功能須要聲明權限permissions。json

編寫 popup.html 文件session

<link rel="stylesheet" href="css/qrcode.css">
    <div class="box">
        <h2 class="title">掃碼瀏覽本站</h2>
        <div class="qrcode-bg" id="qrcode-bg">
        </div>
        
    </div>
    <script src="js/qrcode.js" type="text/javascript"></script>
    <script src="js/popup.js" type="text/javascript"></script>

只粘貼主要代碼。
這裏須要注意：chrome擴展裏的html頁面好像是不能夠寫<script></script>內聯代碼的，因此須要另外寫個js文件，具體什麼緣由，請專業人士解答下。函數

popup.js

onload=function(){
    chrome.tabs.getSelected(function(tab){
        var qrcode = new QRCode('qrcode-bg', {
              text: tab.url,
              width: 128,
              height: 128,
              /*colorDark : '#000000',
              colorLight : '#ffffff',*/
              correctLevel : QRCode.CorrectLevel.H
            });
        console.log(qrcode);
    });
}

chrome.tabs.getSelected(callback(tab)) 這個函數時chrome擴展裏可使用的，用來獲取當前標籤頁對象
回調參數tab是一個標籤頁對象，標籤頁對象內容以下：

{
    id: 標籤id,
    index: 標籤在窗口中的位置，以0開始,
    windowId: 標籤所在窗口的id,
    openerTabId: 打開此標籤的標籤id,
    highlighted: 是否被高亮顯示,
    active: 是不是活動的,
    pinned: 是否被固定,
    url: 標籤的URL,
    title: 標籤的標題,
    favIconUrl: 標籤favicon的URL,
    status :標籤狀態，loading或complete,
    incognito: 是否在隱身窗口中,
    width: 寬度,
    height: 高度,
    sessionId: 用於sessions API的惟一id
}

到這裏已經實現功能了。

調試chrome擴展直接拖拽項目文件夾到chrome的擴展程序頁面（chrome://extensions/）鬆開便可安裝。

效果

彷佛還少點什麼，如何生成自定義文本二維碼呢？
好吧，在增長個配置頁面，在配置頁面實現就能夠了。

在 manifest.json 文件增長項

//配置頁面
"options_page": "options.html",//配置項頁面

options.html 文件內容：

<div class="mlay">
        <div class="mlay-body">
            <div class="box">
                <div class="qrcode-bg" id="qrcode-bg"></div>
                <textarea placeholder="在這輸入文本..." class="text control" id="text"></textarea>
                <button class="btn info" id="exe"><img src="images/icon16.png" class="icon">生成二維碼</button>
            </div>
            <div class="footer">
                <p class="copyright">
                    <a href="https://github.com/mengdu" target="_blank">@藍月蕭楓</a> 版權全部
                    <a href="https://github.com/mengdu/QRcode-tool" target="_blank">瀏覽源碼</a>
                </p>
            </div>
        </div>
    </div>
    <script src="js/qrcode.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/options.js"></script>

編寫options.js文件：

//options.js
onload=function(){
    var qrcode = new QRCode('qrcode-bg', {
        text: "歡迎使用QRcode tool !",
        width: 330,
        height: 330,
        //colorDark : '#000000',
        //colorLight : '#F1F1F1',
        correctLevel : QRCode.CorrectLevel.H
    });
    var text = document.getElementById('text');
    document.getElementById('exe').onclick = function(){
        if(text.value.length <= 0){
            alert("請填寫內容");
            return false;
        }

        qrcode.makeCode(text.value);
    };
}

調試

ok，完美。

打包程序：點擊打包擴展程序