読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

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

アスキーアート ブラウザ n分

今から3分で,Chromeブラウザのアドオン(拡張機能)を作ろう。


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

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


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

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


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


(1)フォルダを作ってjQueryを格納


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

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



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

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


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


(2)マニフェストを作成

先のフォルダ内に 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の部分では,このアドオンが自動的に動作する条件として,ドメイン名を指定している。

(3)メイン処理を実装

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

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

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


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

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


(4)ブラウザにインストールする

Chromeブラウザを開く。

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


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


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

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


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


これで完了。



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


(5)動作テスト

ためしに,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ブラウザのプラグインを自作しよう。 入門に役立つページを集めた。

関連する記事:

Firefoxのサイドバーを作ろう (XUL形式のアドオンでbrowser要素を設定する方法)
http://language-and-engineering.hatenablog.jp/entry/20081203/1228262334


ブラウザ上でVB.NETのコードを動かす (IE上で.NETアプリケーションをホストする方法の続き)
http://language-and-engineering.hatenablog.jp/entry/20100711/p1


開いている全タブのURLとタイトルを,列挙して抽出するFirefoxアドオン (XUL形式プラグインのソースコード付)
http://language-and-engineering.hatenablog.jp/entry/20121221/p1


画面上の邪魔なものを自動ブロックする Firefox プラグインの作り方  (XPI アドオンを自作しよう)
http://language-and-engineering.hatenablog.jp/entry/20081129/1227955571