Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 423 vues

Publié le

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

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

第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∼

×