chromeの拡張機能

つぶやき

chromeの拡張機能がリリースされて久しいが、自分でも作成できるってことなので、ちょっと作り方を調べてみた。単に拡張するだけだと、非常に簡単だった。(ほとんど何もできないけど^^;)
最低限はmanifest.jsonってファイルと1つhtmlを用意するだけ。最初WinXPで作っていて、マイドキュメントの下においていたので、うまく動かず、ちょっと悩んだが--;

せっかくなので、ちょっとだけ、まじめに作ってみた。パッケージにして公開してもいいんだけど、あまりにしょぼいので、やめた。なので、ここにソースだけメモっておく。
用意するのは、manifest.json, background.html, privacy_filter.jsとアイコンファイル icon128.png, icon48.png, page.png。
アドレスバー右のアイコン(page.png)をクリックするとケータイのプライバシーフィルターっぽく、少し透過した全面の四角がのっかかるだけ。再度クリックするか、画面をクリックすれば戻る。（と思う）

manifest.json

{
   "background_page": "background.html",
   "description": "if click, page is filtered ...",
   "icons": {
      "128": "icon128.png",
      "48": "icon48.png"
   },
   "name":"privacy_filter",
   "page_action": {
      "default_icon": "page.png"
   },
   "permissions": [ "tabs", "http://*/*", "https://*/*" ],
   "version": "0.0.0.1"
}


prifilter.js

function $(id) { return document.getElementById(id); }

var blackon = $('privacyfilternewdiv');
if (blackon)
{
	document.body.removeChild(blackon);
}
else
{
	var newdiv = document.createElement('div'); 
	newdiv.setAttribute('id','privacyfilternewdiv');
	newdiv.style.width = "100%"; 
	newdiv.style.height = "100%"; 
	newdiv.style.left = "0"; 
	newdiv.style.top = "0"; 
	newdiv.style.position = "fixed";
	newdiv.style.background = '#ffffff';
	newdiv.style.opacity = 0.5;
	newdiv.style.zIndex = "10000";
	newdiv.onclick = function() {document.body.removeChild(newdiv)};

	document.body.appendChild(newdiv);
}

background.html

<html>
<head>
<script>

chrome.pageAction.onClicked.addListener(
	function(tab) {
		chrome.tabs.executeScript(tab.id,{file:"prifilter.js"});});

function init() {
	chrome.tabs.onUpdated.addListener(
		function(tabId, changeInfo, tab) {
			if (tab.url.match(/^http/i)) {
				chrome.pageAction.show(tabId);
			}
		}
	);
}

</script>
</head>
<body onload='init()'>
</body>
</html>

これだけである。

作成するにあたっては、
Chrome Extensions API リファレンス
http://dev.screw-axis.com/doc/chrome_extensions/
を参考にさせていただいた。多謝。