2012/12/12 にChrome拡張についての紹介をお話してきた時のスライドです

1. Chrome Extension のご 紹 介
～ エンジニアじゃないけど 開発 したい ～
2012.12.12 Google Apps ラクラクまるわかり 講 座
株式会社フォトクリエイト 伊藤 哲之輔
tetsunosuke.ito@photocreate.co.jp

2. 改めまして
• 伊藤 哲之輔（いとう てつのすけ）
• 株式会社フォトクリエイト エンジニア
• Official:
o 写真販売 EC サイト担当
o Facebook ・ Twitter アプリ等 WebAPI 連携サービス
o 最近統計にハマっていて先月統計検定を受験
• Private:
o ラーメン二郎・蒙古タンメン中本
o 野球・バスケットボール
o お笑い・マンガ・ヒトカラ（ New! ）

3. 内 線 表のお 話 だけ少し
• 「 Google Apps ユーザーフォーラム
Sidebar 」
で検索してください。
• 動いてるところだけ少しお見せします

4. Extension 使ってますか？
• Screen Capture
o 見えてない部分や任意の矩形をキャプチャ
• AutoPager
o 複数ページで構成されるページをたどっていく
• Gestures
o マウスジェスチャで戻ったりタブ開いたり
• Replies and more for Google+
o Twitter ・ Facebook ・ Email へシェア
o 投稿者への返信へ「＋氏名」 できる
• User-Agent Switcher
o モバイルサイトのテストに
o 会社でモｂ [ 自主規制 ]

5. Bookmarklet は？
• ユーザーがウェブブラウザのブックマークなどから起動し
、
ウェブブラウザで簡単な処理を行う簡易的なプログラム
例： 画面の一番上へ / 下へ
javascript:(function(){if(document.body.scrollTop>0){h =
0;}else{h=document.documentElement.scrollHeight;}
window.scrollTo(0,h);})();

6. more speed / less stress

7. Extension でできること
• Extensions are small software programs that can
modify and enhance the functionality of the Chrome
browser. You write them using web technologies such as
HTML, JavaScript, and
CSS. http://developer.chrome.com/extensions/
○ Chrome の 挙動を修正したり強化したりする
○ HTML/JavaScript/CSS で書くことができる

8. Apps Script との 違 い
• 言語は JavaScript だが手持ちのエディタで書く
o AppsScript は「互換」だがこちらは単なる JS
o 補完はしてくれない
• 実行は完全にクライアントサイド
o バージョンアップはクライアントに通知をだして
行ってもらう
o Chrome のプロセスを一つ使う（入れすぎ注意）
o 時間によるトリガーなどは作れない

9. 主な改造方法
• BrowserActions
• Context Menus
• Desktop Notifications
• Omni Box
• Page Actions
• その他：
o Background Script
o Content Script

10. Browser Actions

11. Contextual Menus

12. Desktop Notifications

13. Omni Box

14. Page Actions

15. Content Script

16. 私が（自分用に）作っている
• Context Menus
o Gmail から社内グル ー プウェア呼び出し
• Background script
o サイボウズでショ ー トカットキ ー
• Omni Box
o （たまに使う）サイトのテストでカスタムコ
マンド
” それっぽいデモ” を作って
来ました
ちょっとバグってました ...
http://goo.gl/ GhvE6

17. まとめ
• Chrome Extension は HTML/CSS/JS で
Chrome をカスタマイズすることができる
• カスタマイズ可能な 箇 所はいくつかあるので
ドキュメント参照
• まずはアリモノを探して作 業効 率 Up!
• 俺得ツ ー ルを作って差をつけろ！
• JavaScript すごい！

18. Q & A
http://www.fotopedia.com/items/flickr-4494183080