プラグインを使用して QR コードを使用してメモを生成する-jsチュートリアル-php.cn

プラグインを使用して QR コードを使用してメモを生成する

一个新手

リリース： 2017-09-29 09:36:04

オリジナル

2687 人が閲覧しました

QRコードを生成するためにいくつかのプラグインを使用していましたが、常にさまざまな問題に遭遇しました...最後に、簡単に自分で作ったので、ここに記録します。

Chrome プラグインは非常にオープンです。！！ crx ファイルを取得し、ファイルのサフィックスを zip に変更するだけで、最終的にはすべて...

この研究の参考文献: http://open.chrome .360.cn/extension_dev /overview.html 、使用される Javascript QR コードジェネレーターは 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>
    <p class="ddz"></p>
    <p id="qrcode"></p></body></html>

ログイン後にコピー

は、QRコード

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

ログイン後にコピー

のHTMLページを表示します

対応するJSコード

3. テスト