前提
- mac 10.9.5
- 2017/2/15現在
動機
ふと思いついたのでgoogle chrome拡張作りたい。何か簡単で意味のあるものを作ってストアにアップすることを目指す。
手順
リポジトリ作りましたよ〜
https://github.com/kanokanoka/chrome_ext001
参考文献1.によると、html,css,javascriptにmanifest file(json形式)の組み合わせを書けば良いらしい。かつ、chrome.*APIというものがあるらしい。おそらく便利なAPIがたくさんあるんでしょうね(参考文献3.)。
参考文献4.によると、ブラウザの右上に付くアイコンとか、アドレスバーのとこにくるやつとか、ページ内のDOMに手を入れるもの、右クリックから実行するようなものがあるようですが、やはりまずは拡張と言えばアイコンのやつでしょう。
では、「アイコン押して何か確認して、そっ閉じしてネットサーフィンに戻る」
ものを作ることを目指しましょう。
公式文書がいずれも英語なのは、オワコンの極みですね。ただやるしかありません。
んで、書いている通りにmanifest.jsonとindex.htmlとiconを適当に数行書いて行くだけで。。
まじっすか!本当にめちゃ簡単だ!
もう少しがんばってみます。
APIいくつか試すの会
以下の奴らを、manufest.jsonに書いて行く。
- browser_action
"browser_action": {
"default_popup": "index.html",
"default_icon": "icon19.png",
"default_title": "title"
}
こんなのを書くと、アイコンをクリックしたらindex.htmlをポップアップできる。
- background
"background":{
"scripts":["background.js"]
}
こんなのを書くと、実行時にbackground.jsが読み込まれる。
参考文献
1.Chrome拡張の開発方法まとめ その1:概念編
http://qiita.com/edit-mode/items/26d7a22233ecdf48fed8
2.公式のmanifestフォーマット
https://developer.chrome.com/extensions/manifest
3.公式のAPI集(javascript)
https://developer.chrome.com/extensions/api_index
4.初めてでも理解できるようになる「Google Chrome機能拡張の開発」
http://oxynotes.com/?p=8836
→どんなことができるかがわかりやすい
加筆予定
まだまだ発展途上なのでどんどん追記