シンプルなタイマー機能のChrome拡張をつくってみた（簡単）

Chrome拡張をつくってみました。とても簡単だと思います。

拡張機能のボタンをクリックすると時間の計測が始まるというシンプルなタイマー機能です。

こんな感じです。

1. ファイル構成
2. 各ファイルの中身
3. Chrome拡張をためす
4. まとめ

ファイル構成

ファイル構成は

manifest.json
popup.html
script.js
画像フォルダ

となっています。

それぞれ

manifest.json
→ 拡張機能の情報や設定などを書いておくファイル

popup.html
→ Chrome拡張のボタンをクリックしたときにポップアップされるhtmlファイル。今回はタイマーそのものです。

script.js
→ popup.htmlから読み込んでいるjsファイル。タイマーのスクリプトを書いています。

画像ファイル
→ この拡張機能のアイコンを入れています。

各ファイルの中身

こちらの拡張機能で使っている、
manisest.json・popup.html・script.js
3つのファイルの中身を説明していきます。

manifest.json

この拡張機能の情報や設定を指示するファイルです。

{
	"name": "Simple Timer",
	"manifest_version": 2,
	"version": "1.0.0.0",
	"description": "経過時間を計測するシンプルなタイマーです。",
	"browser_action": {
		"default_title": "Simple Timer",
		"default_popup": "popup.html",
		"default_icon": {
			"16": "img/icon16.png",
			"32": "img/icon32.png",
			"48": "img/icon48.png",
			"128": "img/icon128.png"
		}
	},
	"icons": {
		"16": "img/icon16.png",
		"32": "img/icon32.png",
		"48": "img/icon48.png",
		"128": "img/icon128.png"
	}
}

‘browser_action’の中の’popup’
→ ここでChrome拡張のアイコンをクリックしたときに表示されるポップアップをしていしています。
ここでは ‘popup.html’ となっています。

popup.html

<!DOCTYPE html>
<html lang="ja">
	<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">
		<style>
			body {
				padding: 4px 8px;
				margin: 0;
				background-color: rgba(0, 0, 0, .8);
				color: #fff;
				width: 60px;
				text-align: right;
				border-radius: 4px;
			}
			#timer {
				display: block;
			}
		</style>
		<script src="script.js" defer></script>
	</head>
	<body>
		<div id="timer">0 : 00 : 00</div>
	</body>
</html>

このhtmlは、タイマーの表示領域があり、script.jsを読み込むだけとなっています。

script.js

var timerDiv = document.querySelector('#timer');

var jikan = 0,
	fun = 0,
	byo = 0,
	fun00 = '00',
	byo00;

var timerCount = function () {
	setTimeout(timer, 1000);
}
function timer () {
	byo = byo + 1;
	byo00 = ( '00' + byo ).slice( -2 )
	if (byo == 60) {
		fun = fun + 1;
		fun00 = ( '00' + fun ).slice( -2 )
		byo = 0;
		if (fun == 60) {
			jikan = jikan + 1;
			fun = 0;
		}
	}
	timerDiv.innerHTML = jikan + ' : ' + fun00 + ' : ' + byo00;
	timerCount();
}
timerCount();

こちらで何をやっているかについては割愛させていただきます。