Google Chromeの拡張機能を自作してみる
こんにちは私です。
今回はGoogle chromeの拡張機能をつくってみたいと思います。面倒な設定不要でhtml,css,javascriptとウェブ系の知識があれば誰でもつくれるようです。
manifest.jsonを用意する
manifest.jsonはいわゆるパッケージに対してどのようなライブラリを使うのか何と言うパッケージ名なのかなど、パッケージ情報をまとめて記述するファイルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "manifest_version": 2, "name": "Getting started example", "description": "This extension shows a Google Image search result for the current page", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab", "https://ajax.googleapis.com/" ] } |
popup.html
こちらはmanifest.jsonのdefault_popupに記述されているpopup.htmlを作成。これはアイコンが押下された場合にこのhtmlが呼び出される。
|
1 2 3 4 5 6 7 8 |
<html xmlns="http://www.w3.org/1999/xhtml" style="min-width:400px;"> <meta charset="utf-8" /> <div> <h1>今日のぎゃおちゃん占い</h1> <p>今日はとってももふもふな一日でしよぉ</p> <p>最高もふもふ度:20もふ</p> </div> </html> |
icon.png
右上に表示されるアイコン。
実行結果
実行はChromeの『設定』→拡張機能からディベロッパーモードにチェックを入れます。パッケージ化していない拡張機能を読み込むを押下して、先ほど作成したファイルのディレクトリを選択すると、インストールされます。
そして実行結果はこれ。アイコンをクリックすると静的なメッセージがポップアップで表示されるだけの実にシンプルな拡張機能ができました。次回以降はこれに手を加えてみたいと思います。