Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@kanokanoka

chrome拡張作り

More than 3 years have passed since last update.

前提

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

加筆予定

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

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kanokanoka
セキュリティ系スクラムマスターであり非専従労組/CSM/CISSP. Scrumを完全に理解している。将棋ウォーズ四段。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?