しびら

技術ネタのメモとか。

Google Chromeの拡張機能を自作してみる

   

 

chrome-logo

こんにちは私です。

今回はGoogle chromeの拡張機能をつくってみたいと思います。面倒な設定不要でhtml,css,javascriptとウェブ系の知識があれば誰でもつくれるようです。

manifest.jsonを用意する

manifest.jsonはいわゆるパッケージに対してどのようなライブラリを使うのか何と言うパッケージ名なのかなど、パッケージ情報をまとめて記述するファイルです。

 popup.html

こちらはmanifest.jsonのdefault_popupに記述されているpopup.htmlを作成。これはアイコンが押下された場合にこのhtmlが呼び出される。

icon.png

右上に表示されるアイコン。

実行結果

実行はChromeの『設定』→拡張機能からディベロッパーモードにチェックを入れます。パッケージ化していない拡張機能を読み込むを押下して、先ほど作成したファイルのディレクトリを選択すると、インストールされます。

スクリーンショット 2015-05-07 08.14.27

そして実行結果はこれ。アイコンをクリックすると静的なメッセージがポップアップで表示されるだけの実にシンプルな拡張機能ができました。次回以降はこれに手を加えてみたいと思います。

 

 - Chrome, CSS, Javascript , , , ,