SW개발

Time Timer extension 만들기 - 1 (시계 형태 만들기)

초코쨔응 2019. 7. 17. 14:02

Chrome browser extension 을 만들기 위한 기본 파일은 https://computer-choco.tistory.com/143에서와 같이 json, png, html, js 파일이 하나씩 있으면 된다.

 

manifest.json 파일은 다음과 같이 만들었다.

{
  "manifest_version": 2,

  "name": "Time_timer_chromeExtension",
  "description": "Time timer",
  "version": "1.0.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "<all_urls>"
  ]
}

같은 폴더 내에 popup.html 을 다음과 같이 만들었다.

<!DOCTYPE html>
<head>
    <style>
        BODY {width: 520px; min-height: 500px;}
    </style>
    <script src="popup.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
    <p id="current_time">

    </p>
</body>
</html>

위의 html 파일에서 사용한 canvas와 다음의 popup.js에서 사용된 함수들은 https://www.w3schools.com/graphics/canvas_clock.asp를 참고하였다. window가 load되기 전에 코드가 실행되면 아예 시계 형태가 그려지지 않아서 js 파일의 가장 아랫 부분에 window.onload를 사용하였다.

function drawClock(){
    // background
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = radius * 0.90

    // initialize
    drawFace(ctx, radius);
    drawNumbers(ctx, radius);
    drawTime(ctx, radius);

    // repeat
    setInterval(function(){
        drawFace(ctx, radius);
        drawNumbers(ctx, radius);
        drawTime(ctx, radius);
    }, 1000)

    function drawFace(ctx, radius){
        // clock
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();

        // draw face
        ctx.beginPath();
        ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
        ctx.fillStyle = '#333';
        ctx.fill();
    }

    function drawNumbers(ctx, radius){
        // numbers
        var ang;
        var num;
        ctx.font = radius * 0.15 + "px arial";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        for(num = 1; num < 13; num++){
            ang = num * Math.PI / 6;
            ctx.rotate(ang);
            ctx.translate(0, -radius * 0.85);
            ctx.rotate(-ang);
            ctx.fillText(num.toString(), 0, 0);
            ctx.rotate(ang);
            ctx.translate(0, radius * 0.85);
            ctx.rotate(-ang);
        }
    }

    // time
    function drawTime(ctx, radius){
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();

        document.getElementById("current_time").innerHTML = hour + ":" + minute + ":" + second;

        //hour
        hour = hour%12;
        hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
        drawHand(ctx, hour, radius*0.5, radius*0.07);
        //minute
        minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
        drawHand(ctx, minute, radius*0.8, radius*0.07);
        // second
        second = (second*Math.PI/30);
        drawHand(ctx, second, radius*0.9, radius*0.02);

        // hand
        function drawHand(ctx, pos, length, width) {
            ctx.beginPath();
            ctx.lineWidth = width;
            ctx.lineCap = "round";
            ctx.moveTo(0,0);
            ctx.rotate(pos);
            ctx.lineTo(0, -length);
            ctx.stroke();
            ctx.rotate(-pos);
        }


    }
}

window.onload = drawClock;

현재 시간이 텍스트로 나오게 하는 부분은 https://offbyone.tistory.com/241를 참고하였다.

현재까지 만들어진 코드를 저장하면 다음과 같이 확인할 수 있다. 확장 프로그램을 크롬에서 실행해보는 방법 또한 https://computer-choco.tistory.com/143를 참고하면 된다. 

icon.png는 이전 코드 작성시 사용한 이미지를 그대로 사용하였다.

 

반응형