blog.hekt.org

Google Chrome Extensionsを作ってみる

Chromeの拡張です。簡単なJSONとHTMLで作れるみたいなのでやってみました。→postcomment.crx

manifest.json

{
	"name": "Post comment", //拡張の名前
	"version": "1.0", //バージョン
	"description": "post to blog.hekt.org/archives/3498", //拡張の説明
	"browser_action": { //そのまんま、アクション
			  "default_icon": "icon.png", //アドレスバー右のOmniBarに表示させるアイコン
			  "default_title": "comment", //アイコンにカーソルを合わせたときに表示されるテキスト
			  "popup": "popup.html" //アイコンをクリックしたときにポップアップさせる内容
			  },
	"background_page": "background.html" //バックグラウンドで動作させるページ
}

popup.html

<script src="popup.js"></script>
<style>
body {
	min-width:200px;
	overflow-x:hidden;
}
ul {
	margin:0 auto;
	padding:0;
}
li {
	list-style-type:none;
	margin:0.5em 0;
}
</style>

<ul>
	<li><input type="text" id="author" placeholder="Name"></li>
	<li><textarea id="comment" placeholder="contribute your comment."></textarea></li>
	<li><input id="submit" type="button" value="Submit"></li>
</ul>

popup.js

window.onload = function() {
	var bg = chrome.extension.getBackgroundPage();
	var name = document.getElementById('author');
	var comment = document.getElementById('comment');
	var submit = document.getElementById('submit');

	submit.addEventListener('click', function() {
		bg.post(name.value, comment.value);
		window.close();
	});
}

background.html

<script src="background.js"></script>

<form action="/wp-comments-post.php" method="post" id="commentForm">
<input type="hidden" name="comment_post_ID" id="comment_post_ID" value="3498">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
<input type="hidden" id="_wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="66de003324">
<input type="hidden" id="akismet_comment-nonce" name="akismet_comment-nonce" value="079d9d20d4">
<input type="text" name="author" id="author">
<input type="email" name="email" id="email">
<input type="url" name="url" id="url">
<textarea name="comment" id="comment"></textarea>
</form>

background.js

function post(name, comment) {
	var commentForm = document.getElementById('commentForm');
	var inputName = document.getElementById('author');
	var inputComment = document.getElementById('comment');

	if (name && comment) {
		inputName.value = name
		inputComment.value = comment

		commentForm.submit();
	} else {
		alert('empty');
	}
}

popup.htmlに入力された内容をpopup.jsでbackground.jsに渡して、background.jsでフォームの内容を送信、という感じ。送信先はこの記事のコメント欄です。

特に難しいことはやっていませんが、ポイントはchrome.extension.getBackgroundPage()でmanifest.jsonで指定したbackground_pageを呼び出せる点と、そのメソッドとして関数を呼び出せる点ですかね。ただポストするだけならpopup.htmlだけでもできるのですが、ボタンを押したあとサーバーからのレスポンスを待たずにポップアップしたウィンドウを閉じたかったので、実際にポストする動作はバックグラウンドでやることにしました。

Chromeユーザーのひとはどんどんコメントをポストしてくれればいいと思います。