Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」

1,314 views

Published on

フランジア( http://framgia.com/jp/ )とLOUPE( http://lo-upe.com )の合同勉強会での発表資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

第2回 Framgia × LOUPE 勉強会 「Chrome Extensionいじってみた話」

  1. 1. Chrome Extension いじってみた話 Framgia × LOUPE 勉強会 #2 2015.08.24. Engineer at LOUPE, Inc. Takuya Mukohira (mktakuya)
  2. 2. Chrome Extension
  3. 3. Chrome Extension
  4. 4. Chrome Extension ↑ Webブラウザ ↓ 拡張機能
  5. 5. 便利なブラウザ
 Chromeを
  6. 6. 思い通りに拡張する
 方法
  7. 7. Chrome Extensionは 大きく分けて 3種類
  8. 8. 大きく分けて3種類 • Browser Action • Page Action • Context Menu
  9. 9. Browser Action
  10. 10. Page Action
  11. 11. Context Menu
  12. 12. 最小限の Chrome Extension
  13. 13. 最小限の Chrome Extension • iconを用意する • manifest.jsonを書く
  14. 14. 最小限の ChromeExtension { "name": "First App", "version": "0.1", "manifest_version": 2, "description": "My First Chrome Extension", "browser_action": { "default_icon": "icon.png" } } • manifest.json • 設定ファイル • Chrome APIを
 使用する時の権限や、
 読み込む外部ファイルなども 設定する。
  15. 15. 動かしてみる • Chromeの拡張機能ページを開く
 chrome://extensions • デベロッパーモードに✔を入れる。 • 「パッケージ化されていない拡張機能を読み込む」
 で作成した拡張機能を読み込む。
  16. 16. Demo
  17. 17. Browser Actionを
 作ってみる
  18. 18. Browser Actionを
 作ってみる • popup.htmlを書く。 • Browser Actionを作る時に
 必要なHTMLファイル • アイコンをクリックすると
 出てくる画面 • 小さなWebページと考えて良い
  19. 19. Browser Actionを
 作ってみる { "name": "omairi-anytime", "version": "0.1", "manifest_version": 2, "description": "いつでもお参り", "browser_action": { "default_icon": "icon.png", "default_title": "Omairi Anytime", "default_popup": "popup.html" } } • 何をするにもまずは
 manifest.json • manifest.jsonに
 browser_actionの
 記述を追加 • default_popupで
 “popup.html”を指定。
  20. 20. Browser Actionを
 作ってみる <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body style="min-width: 250px"> <h2>Omairi Anytime</h2> <img src="./jinja.png" alt="jinja"> </body> </html> • 普通のHTMLで記述
  21. 21. Demo
  22. 22. Bootstrapも使える
  23. 23. Demo
  24. 24. Context Menu
 をいじってみる
  25. 25. Chrome API • タブやブックマーク、
 cookieやコンテキストメニューなど、
 Chromeで扱うほとんどのものを操作できる。 • 詳しくは
 → https://developer.chrome.com/extensions
  26. 26. Context Menu
 をいじってみる • manifest.jsonに
 permission設定を追加 • 今回はtabを操作するので、 tabsを追加 { "name": "SENSEI NOTE Search", "version": "0.1", "manifest_version": 2, "description": "右クリックメニューからSENSEI NOTE検索", "permissions": [ "tabs", "http://*/*", "contextMenus" ], "icons": { "128": "icons/128.png", "16": "icons/16.png", "32": "icons/32.png", "48": "icons/48.png" }, "background": { "scripts": ["background.js"] } }
  27. 27. Context Menu
 をいじってみる • background.jsを
 書く。 • background.js
 Chromeが起動している間
 ずっと動いている
 スクリプト chrome.contextMenus.create({ "title": "「%s」をSENSEI NOTEで検索", "type": "normal", "contexts": ["selection"], "onclick": function(info) { var url = ‘https://senseinote.com/search?word=' url += encodeURIComponent(info.selectionText); chrome.tabs.create({ url: url }); } });
  28. 28. Demo
  29. 29. Chrome Web Store
 で公開できる • chrome://extensions で
 Extensionをパッケージ化 • Chrome ウェブストア Developer Dashboardへ
 https://chrome.google.com/webstore/developer/ dashboard • $5 課金 • 公開
  30. 30. https://github.com/mktakuya/senseinote-search https://chrome.google.com/webstore/detail/sensei-note-search/ enoecblednfpnefbhfllbnknfeldcaio
  31. 31. SENSEI NOTE
 Notify
  32. 32. Demo
  33. 33. まとめ • Chrome Extensionは普段ぼくたちが触る技術で
 簡単に作れる!
 • 作ったExtensionは
 ぜひ Chrome ウェブストアで公開しよう!
  34. 34. Chrome Extension いじってみた話 Framgia × LOUPE 勉強会 #2 2015.08.24. Engineer at LOUPE, Inc. Takuya Mukohira (mktakuya)
  35. 35. ∼END∼

×