Chrome 插件——二維碼生成筆記


  原來用了幾個生成二維碼的插件,總是遇見各種問題……最后索性自己弄一個,這里順便記錄一下。

  Chrome 插件很開放!!!你只要拿到了crx文件,然后把文件的后綴名改為zip,就可以解壓了,最后一切的一切……

  此次學習參考:http://open.chrome.360.cn/extension_dev/overview.html  ,用到的Javascript二維碼生成器為 https://github.com/davidshimjs/qrcodejs

  1、先看一下,目錄結構

  最主要的就是上圖打開的文件:Manifest.json,他是擴展的入口或者說明文件。本擴展用到的一些配置上圖中都有說明,就不打字了。

  注意:最后一行的 "permissions":["tabs"] 需要注意,列出擴展需要的權限,開始沒有弄這個東西,取不到url地址…………

  2、上代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ddz qrcode</title>
    <style>
        .ddz {
            height: 101px;
            width: 100%;
            background-image: url(./images/ddz.png);
            background-position: center;
            background-repeat: no-repeat;
        }     
        #qrcode {
            width: 250px;
            height: 250px;
            margin-top: 15px;
        }
    </style>
    <script src="./lib/qrcode.min.js"></script>
    <script src="popup.js"></script>
</head>
<body>
    <div class="ddz"></div>
    <div id="qrcode"></div>
</body>
</html>
展示二維碼的html頁面
chrome.tabs.getSelected(null, function(tab) {
    var QRCodeContainer = document.getElementById("qrcode");
    var qrcode = new QRCode(QRCodeContainer, {
        width: QRCodeContainer.clientWidth,
        height: QRCodeContainer.clientHeight
    });
    if (tab.url) {
        qrcode.makeCode(tab.url);
    }
});
對應的JS代碼

  3、測試

  3.1、在瀏覽器中輸入:chrome://extensions/ 並啟用“開發者模式”

  3.2、點擊“加載已解壓的擴展程序…” 選擇你的“擴展程序目錄” 就安裝上了。非常方便……

  3.3 生成二維碼測試,如下圖

  4、最后打包成crx,點擊“打包擴展程序…”,然后依然選擇擴展程序根目錄(私有密鑰文件可以不選,他會自動生成一個密鑰???文件),最后“打包擴展程序”就OK了!

  到此結束。

  2017-09-29更新:

  尷尬啊!!!昨天才弄得,今天再用就出錯了……該擴展采用的Javascript 二維碼生成器有長度限制,哎。今天試了一下這個網址:

  https://azure.microsoft.com/en-us/blog/serverless-for-all-developers-bringing-azure-functions-to-linux-mac-planet-scale-nosql-real-time-analytics-and-productivity-apps/?utm_source=vs_developer_news&utm_medium=referral 

  報錯如下:

 

  現在還沒有找到配置的地方,還是其他的,以后再弄個好的。非常抱歉!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM