Google Chrome拡張機能入門 (全20回)
Googleが提供するブラウザ「Google Chrome」において拡張機能を作成する方法を解説していきます。
このレッスンでは Google Chrome 24.0 を使用しています。
-
#01 Google Chrome拡張機能とはなにか？ (02:44)
- 公式サイト
- 必要となる知識
- 必要となるツール
- 用語（Browser Action、Page Action、Content Scripts、Context Menu）
-
#02 Browser Actionを作ろう (1) (02:51)
- Browser Actionの説明
- manifest.json
-
#03 Browser Actionを作ろう (2) (02:55)
- manifest.json
- popup.html
-
#04 拡張機能を読み込んでみよう (02:15)
- 拡張機能の読み込み
- popup.htmlの修正
-
#05 バッジテキストをつけてみよう (02:43)
- background.js
- バッジテキストの表示
- 動作確認
-
#06 ページの背景色を変えてみよう (1) (02:56)
- manifest.jsonの変更
- popup.htmlの変更
-
#07 ページの背景色を変えてみよう (2) (02:49)
- myscript.js
-
#08 ページの背景色を変えてみよう (3) (02:00)
- 動作確認
- デバッグの方法
-
#09 クリックだけで背景色を変えてみよう (02:57)
- クリックイベントの設定
- 動作確認
-
#10 オプション設定を有効にしよう (1) (02:57)
- manifest.json
- options.html
-
#11 オプション設定を有効にしよう (2) (02:35)
- myscript.js
-
#12 オプション設定を有効にしよう (3) (02:20)
- myscript.js
- background.js
-
#13 オプション設定を有効にしよう (4) (02:04)
- 動作確認
-
#14 Page Actionを作ってみよう (1) (02:53)
- manifest.json
- background.js
-
#15 Page Actionを作ってみよう (2) (02:24)
- Page Actionの表示
- クリックイベントの設定
-
#16 Page Actionを作ってみよう (3) (01:08)
- 動作確認
-
#17 Content Scriptsを作ってみよう (02:40)
- Content Scripts
-
#18 右クリックからTwitter検索する (1) (02:40)
- Context Menu
-
#19 右クリックからTwitter検索する (2) (02:27)
- background.js
- 動作確認
-
#20 拡張機能を他の人と共有しよう (02:22)
- 拡張機能の共有
- 拡張機能の更新
補足情報 Page Actionのアイコンの表示位置について
chrome.pageAction - Google Chrome
https://developer.chrome.com/extensions/pageAction