chrome擴展demo1-小時鐘

時間 2019-11-06

原文原文鏈接

學習《Chrome擴展及應用開發》第一個簡單的chrome擴展
源碼html

目錄結構

+ demo1-Clock
  + images
    - icon128.png
    - icon48.png
    - icon16.png
    - icon38.png
    - icon16.png
  + js
    - my_clock.js
  - manifest.json
  - popup.html

清單文件 `manifest.json`

{
    "manifest_version" : 2,
    "name" : "小小時鐘",
    "version" : "0.1",
    "description" : "demo1 - chrome時鐘擴展",
    "icons" : {
        "16" : "images/icon16.png",
        "48" : "images/icon48.png",
        "128" : "images/icon128.png"
    },
    "browser_action" : {
        "default_icon" : {
            "19" : "images/icon19.png",
            "38" : "images/icon38.png"
        },
        "default_title" : "小小時鐘",
        "default_popup" : "popup.html"
    }
  
}

頁面 `popup.html`

<html>
    <head>
        <meta charset="utf-8">
        <style>
        * {
            margin:0;
            padding: 0;
        }
        body{
            width:200px;
            height: 100px;
        }
        div{
            line-height: 100px;
            font-size: 42px;
            text-align: center;
        }
        </style>
    </head>
    <body>
        <div id="clock_div"></div>
        <script src="js/my_clock.js"></script>
    </body>
</html>

時間腳本 `my_clock.js`

function my_clock(el){
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();

    m = m >= 10 ? m : ('0' + m);
    s = s >= 10 ? s : ('0' + s);

    el.innerHTML = h + ":" + m + ":" + s;

    setTimeout(function(){ my_clock(el); }, 1000);
}

var clock_div = document.getElementById('clock_div');
my_clock( clock_div );