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

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

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

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

こんな感じです。

ファイル構成

ファイル構成は

  • 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();

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

Chrome拡張をためす

つくった拡張機能の動作の確認も簡単です。

chromeをひらき「chrome://extensions」にアクセス。
デベロッパーモードを有効にします。

chrome拡張機能の確認方法

「パッケージ化されていない拡張機能を読み込む」をクリックして読み込むだけです。

chrome拡張の確認方法

よければ先ほどの

manifest.json
popup.html
script.js

をコピーしていただき、適当なアイコンファイルを作って確認してみてもらえればと思います。

まとめ

今回は、アイコンをクリックしたら表示されるpopupだけで表現できるChrome拡張を作ってみました。

次回は、開いているタブのhtmlを操作するChrome拡張をつくってみたいですねえ。

 

ツイッターやってます

ツイッターではブログの更新情報や気になることをつぶやいています。 この記事が気に入ったら、ぜひフォローしてみてください!