Chrome拡張機能の開発：簡単なプログラムを載せてみる
2016/12/11
Webサイトのブックマークに「Google BookMarks」のChrome拡張アプリを利用しているのですが、なぜか対応するアプリ数が大幅減ってしまい使いにくいものばかりになっていることと、Googleアカウントを切り替えるたびに同じBookMarksが使えないという実用上の問題があり、Chrome拡張機能でオリジナルアプリを作ろうと思った次第です。
今回は拡張機能開発にあたっての、基本的な手順を書きました。ローカルでプログラムを用意し、Chromeの拡張機能に組み込むまでの簡単な手順です。
[ad#top-1]
完成イメージ
今回作るプログラムの完成イメージは以下の通りです。
赤丸のアイコンをクリックすると、YahooとGoogleのリンクが現れるようになっています。
ローカルにファイルを用意
適当なフォルダを作って、以下の３つのファイルを作ります。png画像ファイルは、ブラウザの右上に現れるアイコン用の画像（赤丸アイコン）です。ファイル名はmanifest.json以外は任意です。
- icon.png： メニューに現れるアイコン画像。19✖19サイズ。
- manifest.json： 拡張機能を定義するための設定ファイル
- popup.html： プログラム本体
ファイルの中身
manifest.jsonは以下のようになっています。これが基本形です。manifest_versionは現時点で2となっています。それ以外の値は任意です。”browser_action”の中にアイコンファイルやHTMLファイルを紐づけます。
popup.htmlは何でもいいのですが、以下の通りYahooとGoogleのリンクを表示させます。target=”_blank”にすることで新しいタブで開くようにできます。
Chromeから読込み
ブラウザのメニューから「その他ツール」－「拡張機能」を選択します。
「デベロッパーモード」にチェックを入れ、「パッケージ化されていない拡張機能を取り込む」をクリックします。
保存してあるフォルダを選択します。
選択すると、下図のように自作アプリが現れ、ブラウザ右上にもアイコンが表示されます。
アイコンをクリックするとプルダウンメニューが現れ、HTMLの内容が表示されます。
次回は、現在のページ情報をGETする方法について書きたいと思います。
[ad#ad-1]
スポンサーリンク