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