LoginSignup
4

More than 5 years have passed since last update.

chrome拡張作り

Last updated at Posted at 2017-02-09

前提

  • 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を適当に数行書いて行くだけで。。
スクリーンショット 2017-02-09 23.38.15.png

まじっすか!本当にめちゃ簡単だ!
もう少しがんばってみます。

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
 →どんなことができるかがわかりやすい

加筆予定

まだまだ発展途上なのでどんどん追記

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4