nemrod.se Various guides and experiments

Clock Icon


Clock IconThis extension, requested by an acquaintance, quite simply displays the current time (and date on hover) next to the omnibox in Chrome. Really nothing more to it. Technically it displays the current time in a HH:MM format in the badge of a browser action. The badge is specified to fit four characters or less according to the developer docs, but at least for me it’s working just fine with five (HH:MM). Report in if it doesn’t for you. :)

Clock Icon on Chrome Web Store

Just for fun here’s the source:
manifest.json

{
	"name": "Clock Icon",
	"version": "1.0",
	"description": "Shows the time (hours and minutes) next to the omnibox.",
	"icons": { "128": "icon128.png" },
	"background_page": "background.html",
	"browser_action": {
		"default_icon": "icon128.png",
		"default_title": "dd/mm/yyyy hh:mm"
	}
}

background.html

<html>
	<script>
		chrome.browserAction.setBadgeBackgroundColor({"color": [0,0,0,255]});

		function pad(s, n) {
			s = '' + s;
			while(s.length < n) {
				s = '0' + s;
			}
			return s;
		}

		function updateTime() {
			dateobj = new Date();

			year = pad(dateobj.getFullYear(), 4);
			month = pad(dateobj.getMonth(), 2);
			day = pad(dateobj.getDate(), 2);
			hour = pad(dateobj.getHours(), 2);
			minute = pad(dateobj.getMinutes(), 2);

			badge = hour + ':' + minute;
			title = day + '/' + month + '/' + year + ' ' + badge;
			chrome.browserAction.setBadgeText({"text": badge});
			chrome.browserAction.setTitle({"title": title});

			var t = setTimeout("updateTime()", 10000);
		}

		updateTime();
	</script>
</html>

Posted in Chrome Extensions | 1 Comment

One response to “Clock Icon”

  1. Elijah Beale says:

    Hello,

    I like clock icon. It’s simple and handsome. However, the time does not update unless I close chrome and reopen.

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *