takaya030の備忘録

PHP、Laravel、Docker などの話がメインです

簡単な Chrome エクステンション(拡張機能)を作ってみた

2ちゃんねるdat落ちしたスレッドを見るときにログ速をよく使うのですが、検索窓にスレッドのURLをコピペするのが面倒なので、Chromeで開いているスレッドをログ速で検索するエクステンション(拡張機能)を作ってみました。

ソースコード

manifest.json

{
	"manifest_version": 2,
	"name": "logsoku",			// 拡張の名前
	"version": "0.1",			// バージョン
	"description": "現在開いている2chのスレをログ速で開く",	// 拡張の説明
	"browser_action": {
		"default_icon": "icon19.png",		// アドレスバー右のOmniBarに表示するアイコン 
		"default_title": "logsoku",		// アイコンにカーソルを合わせたときに表示されるテキスト
		"default_popup": "popup.html"		// アイコンをクリックしたときにポップアップさせる内容
	},
	"permissions": [
		"tabs"
	]
}

popup.js

window.onload = function() {
	chrome.tabs.query( {active: true, lastFocusedWindow: true}, function (tabs) {
		var tab = tabs[0];
		//tab.urlに開いているタブのURLが入っている
		var logsoku_url = "http://www.logsoku.com/2ch/" + tab.url;
		chrome.tabs.update(tab.id, {url: logsoku_url})
		window.close();
	});
}

popup.html

<script src="popup.js" type="text/javascript"></script>

icon19.png (アイコン画像)

インストール

上記の4つのファイルを任意のフォルダに保存します。
Chrome のアドレスバーで chrome://extensions/ と入力して拡張機能画面を表示します。
画面右上にある「デベロッパーモード」のチェックボックスにチェックを入れます。
画面上部左側に「パッケージ化されていない拡張機能を読み込む」というボタンが表示されるので、それをクリックして先ほど保存したファイルのフォルダを指定します。
読み込みが成功したら拡張機能のリストに「logsoku」という項目が追加されます。

使い方

Chrome2ちゃんねるのスレッドを開きます。
そのタブを選択した状態でアドレスバー右にあるをクリックするとログ速で検索した結果を表示します。