今回は実践編
詳しいチュートリアルはいくらでも良いものが上がってますので、実用性がある中では（多分）世界一簡単なチュートリアルにします。
開発環境
- macOS Catalina 10.15.1
- Chrome バージョン: 79.0.3945.79
- 適当なエディタなど
お天気を表示するだけのプラグイン「OTENKI（仮）」
- アイコンをクリックしたら今のお天気が表示される
- 表示される天気は予め決めた地点のみ
という、「実用性がないこともないが、いささか不便な拡張」を作っていきます。
手順を予習
- フォルダを作る
- manifest.jsonを用意
- jsを書く
- Chromeに読み込む
- 出来た！
簡単！
着手
フォルダを作る
otenkiフォルダを作るついでに必要なファイル（とりあえず空っぽ）と適当な場所から落としてきたjQueryをおいておきましょう。
otenki
├── background.js
├── jquery.min.js
└── manifest.json
今回使うファイルはこれで全て。３つだけ。
manifest.jsonを用意
ドキュメントによると本当に必要なものというのは頭の３行くらいです。
{
"manifest_version": 2,
"name": "OTENKI",
"version": "0.0.1",
"background": { "scripts": ["jquery.min.js", "background.js"] },
"browser_action": {},
"permissions": [
"http://*/*"
]
}
落としてきたjQueryのファイル名が違った場合はリネームするかここの記述を調整しましょう。
jsを書く
chrome.browserAction.onClicked.addListener(updateIcon);
function updateIcon(){
var str_req_url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=130010';
$.ajax(str_req_url)
.done(function(data) {
chrome.browserAction.setIcon({ path:data["forecasts"][0]["image"]["url"] });
chrome.browserAction.setBadgeText({ text: data["forecasts"][0]["telop"] });
})
.fail(function(data){});
}
シンプルにいきましょう。
一応ざっくり日本語訳的な説明。
アイコンをクリックされたら以下を実行
URLは「http://weather.livedoor.com/forecast/webservice/json/v1?city=130010」ですよ
そのURLにリクエスト。
完了したら…
アイコンをホニャホニャ。
バッジテキストをホニャホニャ。
※お仕事ではちゃんとエラーを拾いましょう。
さて突然出てきたhttp://weather.livedoor.com/ですが、何かというとLivedoorが提供しているお天気Webサービス（Livedoor Weather Web Service / LWWS）というお天気情報APIのURLになります。末尾の数字部分で地点を指定しており、このURL(city=130010)は「東京都 東京」の情報です。このAPIは認証の必要がないので、URLをブラウザで開くだけでjsonを取得できることが確認できます。
余談ですが、こういう時（？）用にChromeにJSONViewなどの拡張を入れておくと上記のようにきれいに表示してくれるのではかどります。
今回はあまり大したこともしないので端折った書き方をしていますが、まぁ必要な情報をいい感じに扱えてるのでのでよしとしましょう。コード類の準備は完了。
Chromeに読み込む
拡張機能ページ（chrome://extensions/）にアクセスしてポチポチします。
- [デベロッパーモード]をオン
- [パッケージ化されていない拡張機能を読み込む]をクリック
- 読み込みダイアログで
otenkiフォルダを選択 - 一覧にOTENKI拡張が表示される（か、エラーが表示される）
今回はデフォルトアイコンを設定していないので、メニュー部分には少し残念なアイコンが表示されているかと思います。
出来た！
クリックしたらアイコンが変更され、バッジにテキストが表示されます。
提供されているおひさま画像が正方形じゃないゆえに歪んで炎みたいになっているのはご愛嬌。
まとめ
Chrome拡張は、探してみるとどんなものでも誰かが提供してくれているものですが、本当に自分や周囲の人が求めているものをピンポイントに作ってみるのはとても大切だと思います。車輪の再発明になっては面白くないですが、じゃあ現在では車輪の研究が全く行われていないかというとそういうわけでもないです。
また、ネットのサービスなどでクロスプラットフォームとかマルチプラットフォームというと、フロントエンドが違うだけといいますか、まぁChrome拡張も一つのフロントエンドと考えているサービス・企業も多いです。自社製・他社製を問わずAPIから情報を取得していい感じに表示するということに慣れておいて損はないです。フロントエンドエンジニアの方でそういう経験がない方はこういうのやっておきましょう。
それはそうと、今回はコードが20行にまとまらなかったので悔しいです。
満足行かないチャレンジャーへ。
- 残念なデフォルトアイコンをなんとかしたい！ -> デザイナーじゃ無い方は描くのは大変なので、（著作権やライセンスに気をつけながら）アイコン素材サイトなどから使わせていただくのがいいかと。適当に同梱して
manifest.jsonに記述するだけ〜。 - 最低気温/最高気温を表示したい！ -> 今回取得したデータの中に気温（temperature）の文字が。
nullになっている謎を解明して、バッジに表示できるようチャレンジしてみましょう。 - 明日・明後日の天気も表示したい！ -> ポップアップ画面作成にチャレンジして表示内容を増やしてみましょう。すでに情報は取得済みです。
- 場所を変更できるようにしたい！ -> 設定画面を作ってみたり、chrome.storageとか使うことになるかと。
- 自動的に表示内容がアップデートされるようにしたい -> JSで定期的な処理を行う形になりますかね。人様のAPIなので叩きすぎないように気をつけてください。
- 公開してみたい！ -> ファイト！前述の参考ページにまとめてくださってます。