Chrome拡張でポップアップする簡単な時計を作ってみた【習作】

　引き続きChrome拡張にトライ。以下のサイトを参考にしつつ、全く同じでも変化が無いのでポップアップで出るようにしました。

トラねこblog : 簡単なGoogle Chromeの拡張を作ってみるその1（Simple Clock）

manifest.json

{
	"name":"Simple Clock",
	"version":"1.0",
	"description":"習作：簡単な時計",
	"browser_action":{
		"default_icon":"clock.png",
		"popup":"popup.html"
	},
	"permission":[
	],
	"content_scripts":[{
	  "js":["jquery-1.6.2.js", "clock.js"],
	  "css":["clock.css"],
	  "matches":["http://*/*", "https://*/*"]
	}]
}

popup.html

<html>
<head>
	<script type="text/javascript" src="jquery-1.6.2.js"></script>
	<script type="text/javascript" src="clock.js"></script>
	<link rel="stylesheet" type="text/css" href="clock.css" />
</head>
<body>
	<script type="text/javascript">
		setClock();
	</script>
	<div id="simple_clock" class="clock"></div>
</body>
</html>

clock.js
※ 9/2追記：すみません、最後の行にゴミが残っていたので削除しました。

function setClock() {
	var now = new Date();
	var hour = now.getHours();
	var min = now.getMinutes();
	var sec =now.getSeconds();
  
	// 一桁の場合は0詰め
	if(hour < 10) {
		hour = '0' + hour;
	}
	if(min < 10) {
		min = '0' + min;
	}
	if(sec <10) {
		sec ='0' + sec;
	}
	$('#simple_clock').html(hour + ":" + min + ":" + sec);
	// 1秒毎に時刻更新
	setTimeout("setClock()", 1000);
}

clock.css

clock {
	position:fixed;
	right:30px;
	bottom:20px;
	font-size:22px;
	font-family:Century Gothic;
	text-align:center;
	padding:10px;
	background-color:#030303;
	color:#0F0F0F;
	border-radius:0.2em;
	opacity:0.80;
	z-index:10000;
}

※ 9/2追記：すみません、マニフェストファイルに誤りがあったので修正しました。「content_scripts」の記述が不要でした。

manifest.json (修正後)

{
	"name":"Simple Clock",
	"version":"1.0",
	"description":"習作：簡単な時計",
	"browser_action":{
		"default_icon":"clock.png",
		"popup":"popup.html"
	},
	"permission":[
	]
}

ミッションたぶんPossible

どこにでもいるシステムエンジニアのなんでもない日記です。たぶん。

Chrome拡張でポップアップする簡単な時計を作ってみた【習作】