Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome拡張機能をつくる #TechLunch

Chrome拡張機能をつくる #TechLunch

Chrome拡張機能をつくる
2013/11/26 (水) @ Livesense TechLunch
発表者:鈴木 健太

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.
PRO

April 22, 2014
Tweet

Transcript

  1. γεςϜ։ൃ෦ɹϝσΟΞ։ൃୈ̎άϧʔϓ Copyright © LIVESENSE Inc. ླ໦ɹ݈ଠ Chrome֦ுػೳΛ࡞Δ Cybozu Hack

  2. None
  3. None
  4. 拡張機能でできること

  5. •  λϒ •  ͓ؾʹೖΓ •  ݱࡏද͍ࣔͯ͠Δϖʔδ •  όοΫάϥ΢ϯυʹৗற •  ΫϦοϓϘʔυ

    •  ΫοΩʔ •  σεΫτοϓ௨஌ ͍Ζ͍Ζ͍͡Ε·͢ http://developer.chrome.com/extensions/declare_permissions.html
  6. •  Javascript •  HTML •  Css •  ը૾ ඞཁͳ΋ͷ

  7. None
  8. Chromeで確認

  9. 作り方

  10. manifest.json ઃఆϑΝΠϧ {      "manifest_version":  2,      “name”:

     “拡張機能の名前",      “version”:  “バージョン番号",        “descrip8on”:  “この拡張機能はこんなことができます",      "icons":  {...},        "background":  {          “persistent”:  false  //  バックグラウンドに常駐しない      },      “background_page”:  ...,  //  バックグラウンドで色々やってくれるやつ      “permissions”:  [“hCp://*.google.com/”,  ”no8fica8ons“],  //  権限ください     続く…
  11. manifest.json ઃఆϑΝΠϧ …続き     "browser_ac8on":  {      

               “default_icon”:  “img/icon.png”,  //  表示するアイコン                  “default_popup”:  “popup.html”  //  アイコンをクリックしたときに表示する画面          },                    “op8ons_page”:  “op8ons.html”  //  オプション(設定)画面   }
  12. ৭ʑ΍ͬͯΈΔ %&.0

  13. Chromeͷ֦ுػೳ͕ॏ͍ݪҼͷҰ͕ͭ ʮόοΫάϥ΢ϯυϖʔδ͕ৗʹ։͍͍ͯΔʯ͜ͱ όοΫάϥ΢ϯυʹৗற͠ͳ͍ ඞཁʹԠͯ͡ϖʔδΛ։͍ͯϦιʔεফඅΛ࡟ݮ͢Δ &WFOU1BHF

  14. # 5෼ຖʹόοΫάϥ΢ϯυΛى͜͢ΞϥʔϜΛηοτ chrome.alarms.create(‘alarmName’, { periodInMinutes: 5}); # ΞϥʔϜ͕ͳͬͨͱ͖ͷॲཧ chrome.alarms.onAlarm.addListener(function(alarm) {

    alert(alarm.name); }, this)); όοΫάϥ΢ϯυ͸ΞϥʔϜͰى͜͞ΕΔ
  15. σʔλͷอଘ MPDBM4UPSBHF ͍ͭϖʔδ͕ফ͑ͯ΋͍͍Α͏ʹɺσʔλ͸ஞ࣍อଘ

  16. CybozuのChrome拡張機能 をつくってみた

  17. αΠϘ΢ζ͋Δ͋Δ ༧ఆ͕ೖ͍ͬͯͨͷʹ๨Εͯͨ

  18. ということで、 予定の数分前に通知してくれる 拡張機能をつくってみた

  19. αΠϘ΢ζ αΠϘ΢ζެࣜΩϟϥΫλʔʮϘ΢ζϚϯʯ͕௨஌ͯ͘͠Ε·͢ɻ

  20. αΠϘ΢ζ %&.0

  21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ