今から３分で，Chromeブラウザの独自アドオンを自作してみよう（jQueryを使ったクローム拡張機能を，開発および動作テストする入門）

今から３分で，Chromeブラウザのアドオン（拡張機能）を作ろう。

ここで作るのは，「表示したWebページの内容をjQueryで加工する」というChromeプラグインだ。

アドオン自作の入門，初歩の第一歩にうってつけ。

作成に必要なツールは，なんとメモ帳だけ。

JavaScriptやJSONなどの「Web系技術」を使って，ちょこっとコーディングするだけで完成してしまう。

わずか３分で作成とインストールを終えるので，今すぐに始めてみよう。

（１）フォルダを作ってjQueryを格納

（２）マニフェストを作成

（３）メイン処理を実装

（４）ブラウザにインストールする

（５）動作テスト

使い終わったら

参考資料

（１）フォルダを作ってjQueryを格納

まず，どこでもいいので，適当な名前のフォルダを作成する。

フォルダ名は「hoge」でよい。

下記URLから，jQueryをダウンロード。
先のフォルダ内に保存。

http://code.jquery.com/jquery-2.1.4.m...

なお，jQueryが無くてもアドオンは作れる。

（２）マニフェストを作成

先のフォルダ内に manifest.json というファイルを作り，エディタで開く。

下記の内容をコピペ。文字コードはUTF-8で。

{
  "name": "MyTestChromeAddon",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Chromeアドオンを自作してみるテスト。",
  "content_scripts": [
    {
      "matches": ["http://*.jp/*"],
      "js": ["jquery-2.1.4.min.js", "fuga.js"],
      "run_at": "document_idle"
    }
  ]
}

アドオンの名称やバージョン，動作に必要なjsファイルなどを指定している。

matchesの部分では，このアドオンが自動的に動作する条件として，ドメイン名を指定している。

（３）メイン処理を実装

先のフォルダ内に，fuga.js という名称で下記の内容をコピペ・保存。

$(function(){
	//window.alert("hoge");

	// ページ内を加工
	
	$("body").html(
		$("body").html().replace( /ー/g, "━━━(ﾟ∀ﾟ)━━━" )
	);
	
});

アドオン作成は，これで完了だ。

動作を試すために，さっそくインストールしよう。

（４）ブラウザにインストールする

Chromeブラウザを開く。

右上の「Ξ」を押し，設定＞拡張機能　を選択。

右上の「デベロッパーモード」のチェックボックスを押下。

また，「パッケージ化されていない拡張機能を読み込みます」のボタンを押下。

フォルダ選択画面になるので，先のフォルダを選択。

すると，自分の作成したアドオンが表示され「有効」となる。

これで完了。

わずか３分以内で，アドオンの作成とインストールが完了したはずだ。

（５）動作テスト

ためしに，Chromeでこのブログを表示すると・・・

JavaScriptの動かないコード(中級編)　配列のsort結果がおかしい …評価関数が正数か負数以外の値を返す場合の挙動のエラー
http://language-and-engineering.hatenablog.jp/entry/20150925/JavaScriptArrayS...

f:id:language_and_engineering:20151022141925p:plain

このように，ページのロードが完了した時点で，アドオンの機能が自動的に動作し

のばす音「ー」がアスキーアートに置換されている。

次に，Yahoo天気を開くと：

f:id:language_and_engineering:20151022141933p:plain

「はてなブックマーク」を開くと：

f:id:language_and_engineering:20151022141934p:plain

上記はいずれも，URLが「http://～～.jp」なので，アドオンが動作している。

このURL条件は，マニフェストのmatchesで指定している。

この条件にマッチしないURLを開くと，アドオンは動作しない。

ためしに，上記の「はてブ」ホッテントリとして表示されているエントリを開いてみよう。

ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
http://www.webcreatorbox.com/inspirat...

↑このURLは～.com という形式なので，表示中のページ内容は改変されない。

使い終わったら

このように，独自アドオンを簡単に作って動かせることがわかった。

動作テストが終わったら無効化しよう。

設定＞拡張機能　から，今回作った MyTestChromeAddon の「有効化」のチェックを外す。

これで無効化できた。

今回は第一歩という事で，スクリプトの内容は非常に簡潔なコードにしてある。

スクリプトの内容を作りこんで，自分なりのアドオンを作ってみよう。

参考資料

Chromeのアドオン自作の入門情報は，下記のページにまとまっている。

Chromeブラウザのプラグインを独自開発するためのリンク集
http://computer-technology.hateblo.jp/entry/20130918/1379457383

Chromeブラウザのプラグインを自作しよう。入門に役立つページを集めた。