BrowserExtension四方山話 #yapc8oji

#yapc8oji でトークしたブラウザ拡張に関するトークです。友だちになってください

Transcript

1. Browser Extension
   ࢛ํࢁ࿩
   Pasta-K
   pasta0915@gmail.com
   pastak@notainc.com
   pastak@kmc.gr.jp
   

   View Slide

2. ͜Μʹͪ͸
   

   View Slide

3. @pastakɹ
   

   View Slide

4. @pastakɹ
   • ژ౎͔Βདྷ·ͨ͠
   • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢
   • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ
   • JavaScript / React
   • Ruby on Rails
   • Browser Extension
   

   View Slide

5. View Slide

6. http://blogja.gyazo.com/entry/135895105588
   

   View Slide

7. Gyazo Features
   

   View Slide

8. ؔ࿈ը૾ݕࡧ Ivy Search
   

   View Slide

9. OCR
   

   View Slide

10. ը૾ฤूػೳ
    

    View Slide

11. ڞ༗ίϨΫγϣϯ
    

    View Slide

12. https://chrome.google.com/webstore/detail/gyazo/
    ffdaeeijbbijklfcpahbghahojgfgebo
    

    View Slide

13. https://addons.mozilla.org/firefox/addon/gyazo-official/
    

    View Slide

14. We are hiring!!
    • ݄ؒ1000ສUU 6600ສPV / month
    • JavaScript / Ruby on Rails / Golang
    • iOS / Mac / Windows App
    • Kyoto or Everywhere
    • Tokyo, Yokohama, Hokkaido
    • USA, Australia
    https://www.wantedly.com/companies/nota
    

    View Slide

15. ຊ೔ͷ
    ্ژ໨త
    

    View Slide

16. ϒϥ΢β֦ு։ൃ
    ༑ୡཉ͍͠
    

    View Slide

17. ༑ͩͪʹ
    ͳͬͯ͘Εʂʂ
    

    View Slide

18. ຊ೔ͷ͓඼ॻ͖
    • ϒϥ΢β֦ு͓͞Β͍
    • Chrome Extensionʹ͍ͭͯ
    • WebExtensionݱঢ়֬ೝ
    • ։ൃTipsখ࿩ू
    

    View Slide

19. ຊ೔ͷొ৔͠ͳ͍ϒϥ΢β֦ு
    • Internet Explorer
    • Safari
    

    View Slide

20. ϒϥ΢β֦ு
    ͓͞Β͍
    

    View Slide

21. ϒϥ΢β֦ுͬͯԿʁʁ
    

    View Slide

22. ϒϥ΢β֦ுͬͯԿʁʁ
    • ϒϥ΢βʹΠϯετʔϧ͢Δͱ
    

    View Slide

23. ϒϥ΢β֦ுͬͯԿʁʁ
    • ϒϥ΢βʹΠϯετʔϧ͢Δͱ
    • ৭Μͳػೳ͕૿͑ͯศརͳ΍ͭ
    

    View Slide

24. ϒϥ΢β֦ுͬͯԿʁʁ
    • ϒϥ΢βʹΠϯετʔϧ͢Δͱ
    • ৭Μͳػೳ͕૿͑ͯศརͳ΍ͭ
    • DeveloperTool, Utility, Downloader etc…
    

    View Slide

25. ϒϥ΢β֦ுͬͯԿʁʁ
    • ϒϥ΢βʹΠϯετʔϧ͢Δͱ
    • ৭Μͳػೳ͕૿͑ͯศརͳ΍ͭ
    • DeveloperTool, Utility, Downloader etc…
    • Adblock, Greasemonkey, Firebug, ͸ͯͳϒ
    οΫϚʔΫ, Evernote, Pocket, Gyazo…
    

    View Slide

26. ϒϥ΢β֦ு͜Ε·Ͱ
    • Chrome, Opera
    • JS + CSS + HTML Ͱ࡞੒Մೳ
    • Firefox
    • XUL + XPCOMΛ༻͍ͨ։ൃ
    • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm)
    ͋͋
    • Safari
    • JS + CSS + HTML Ͱ࡞੒Մೳ
    • ୠ͠ɺAPI͸Chromeͱେ͖͘ҟͳΔ
    

    View Slide

27. ϒϥ΢β֦ு͜Ε͔Β
    • Chrome, Opera
    • JS + CSS + HTML Ͱ࡞੒Մೳ
    • Firefox
    • XUL + XPCOMΛ༻͍ͨ։ൃ ← ഇࢭ༧ఆ
    • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm)
    • Chromeޓ׵ͷWebExtension ← NEW!!!!!!!!
    • Safari
    • JS + CSS + HTML Ͱ࡞੒Մೳ
    • ୠ͠ɺAPI͸Chromeͱେ͖͘ҟͳΔ
    ※༏ઌॱҐ͸
    ߴ͘ͳ͍ͦ͏ͳͷͰ
    ͙͢ʹഇࢭ͸ͳͦ͞͏
    

    View Slide

28. ϒϥ΢β֦ு*͞Βʹ*͜Ε͔Β
    • Mozilla/MS/Operaͷ3ऀ͕֦ுػೳͷίΞAPIͷඪ४Խ
    ΛఏҊ
    • W3CͷBrowser Extension Community GroupͷϝʔϦ
    ϯάϦετʹ͓͍ͯɺϒϥ΢βͷ֦ுػೳʹ͓͚ΔίΞ
    API΍ϚχϑΣετɺύοέʔδΛඪ४Խ͢Δ͜ͱΛڞ
    ಉͰఏҊ
    • http://rockridge.hatenablog.com/entry/
    2016/05/05/110059
    • https://github.com/browserext/browserext
    • https://twitter.com/browserext
    

    View Slide

29. https://developer.microsoft.com/en-us/microsoft-edge/extensions
    

    View Slide

30. https://developer.microsoft.com/en-us/microsoft-edge/extensions
    

    View Slide

31. Coming to MS Edge ?
    • ݱࡏϓϨϏϡʔͰ͍͔ͭ͘ެ։͞ΕͯΔ
    • ϥΠϯφοϓΛݟͯΔͱɺChrome Extension
    ޓ׵ͬΆ͍Α͏ʹݟ͑Δ
    • WGʹ΋ࢀՃ͍ͯ͠Δ͖ͬ͠ͱͦ͏ͳΓͦ͏
    • “in the future users will be able to download
    extensions from the Windows Store.”
    • https://developer.microsoft.com/en-us/
    microsoft-edge/platform/faq/#extensions
    

    View Slide

32. $ISPNF
    &YUFOTJPO
    

    View Slide

33. Chrome Extensionͱ͸ʁ
    • ։ൃ͸ JS / HTML / CSSͰߦ͏
    • docs: https://developer.chrome.com/extensions
    • Background / content script / popup
    • ഑෍͸ Chrome Web Store
    • ແ৹ࠪ / ࠷ॳʹ$5ࢧ෷͏
    ਤ͸ https://developer.chrome.com/extensions/overview ΑΓ
    

    View Slide

34. Chrome / Opera
    • Opera͸Chromiumϕʔεͷϒϥ΢βͳͷͰجຊతʹ͸ͦͷ··
    ಈ࡞͢Δ
    • https://dev.opera.com/extensions/
    • Chrome Web Store͔ΒOperaʹΠϯετʔϧՄೳʹ͢Δ
    ExtensionͳΜͯ΋ͷ΋͋Δ
    • Sidebar΍Speed DialͳͲҰ෦OperaͷΈͰ࢖͑ΔAPI΋͋Δ
    • https://dev.opera.com/extensions/apis/
    

    View Slide

35. 8FC
    &YUFOTJPO
    PO'JSFGPY
    

    View Slide

36. Firefox Addonͷ͜Ε·Ͱ
    • XUL + XPCOMΛ༻͍ͨ։ൃ
    • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm)
    • ݩ “Jetpack”
    • JSͰखܰʹFirefox֦ுΛهड़Մೳʹ
    • ৄ͘͠͸ http://www.slideshare.net/pastak/
    firefox-addon-sdk
    

    View Slide

37. WebExtensionొ৔
    • 2015೥8݄຤ ChromeExtensionޓ׵ͷWebExtension
    ܗࣜͷ֦ுΛαϙʔτ͢Δͱൃද
    • Firefox v46Ͱ Alpha Releaseʹ
    • 2016-08-02ͰStableʹͳΔ v48 Ͱ Stable Releaseͷ
    ༧ఆ
    • σεΫτοϓ޲͚ͷΈͳΒͣɺ Android൛΋ରԠର
    ৅ʂʂʂʂʂʂʂʂ
    • ͢ͰʹAMO͔ΒͷΠϯετʔϧͳͲ͸Մೳʹͳͬͯ
    ͍Δ
    

    View Slide

38. ࠷৽ঢ়گ
    • ॾʑ΍ͬͯ͘ΕΔίϚϯυϥΠϯπʔϧ web-ext ొ
    ৔
    • Build, Signɺauto run
    • https://blog.mozilla.org/addons/2016/04/29/
    webextensions-in-firefox-48/
    • Optionϖʔδαϙʔτ׬ྃ
    • chrome.*APIΛݺ΂ͳ͍όά͕͋Δʁ
    • ։ൃதΞυΦϯͷreload
    • TabMixPlusͳͲஶ໊ͳAddon༻ͷAPIΛ४උ͍ͯ͘͠
    

    View Slide

39. ϋΠϒϦουΞυΦϯ
    • ௿ϨΠϠʔAPIͳͲΛར༻͍ͨ͠ΞυΦϯͳͲʹ޲͚ͯͷ
    ஈ֊తॲஔʢ࠶ىಈෆཁΞυΦϯͰ͋Δඞཁ͕͋Δʣ
    • Addon SDKͰ࡞ͬͨΞυΦϯ͔ΒWeb Extensionͷػೳ
    Λݺͼग़ͯ͠ར༻Ͱ͖Δ
    • chrome.runtime.sendMessageܦ༝Ͱ΍ΓͱΓ͢Δ
    • API͕શͯἧͬͨ࣌఺ͰwebextensionσΟϨΫτϦҎ֎
    Λഁغ͢Δ͜ͱͰҠߦ׬ྃͱͰ͖Δ
    • ݱࡏઈࢍ࣮૷த https://bugzilla.mozilla.org/show_bug.cgi?id=1252215
    

    View Slide

40. (ZB[Pͷ
    ϒϥ΢β֦ு
    

    View Slide

41. https://chrome.google.com/webstore/detail/gyazo/
    ffdaeeijbbijklfcpahbghahojgfgebo
    

    View Slide

42. https://addons.mozilla.org/firefox/addon/gyazo-official/
    

    View Slide

43. 8FC&YUFOTJPO
    ͷԸܙͰͭͷ
    ιʔείʔυ͔Β
    ੜ੒͍ͯ͠Δ
    

    View Slide

44. ͦΖͦΖ
    ΍͍͖ͬͯͨ͘
    ͳ͖ͬͯ·ͨ͠
    ͔ʁ
    

    View Slide

45. View Slide

46. ຊ౰ʹ$ISPNF
    &YUFOTJPO
    ͕ͦͷ··
    ಈ͘ͷʁʁʁ
    

    View Slide

47. ײ֮తʹ͸ׂ
    ͘Β͍ͷ
    &YUFOTJPO͸
    γϡοͱҠ২Մೳ
    

    View Slide

48. ײ֮తʹ͸ׂ
    ͘Β͍ͷ
    &YUFOTJPO͸
    γϡοͱҠ২Մೳ
    $ISPNF4UPSFͰ
    ެ։͞Ε͍ͯΔ΋ͷͷ͏ͪ
    ͦͷ··'JSFGPY%FTLUPQͰ
    ಈ͘΋ͷ͸
    
    IUUQXXXBSFXFXFCFYUFOTJPOTZFUDPN
    DISPNF
    
    

    View Slide

49. Ҡ২ͷ࣌ʹ֬ೝ͍ͨ͜͠ͱ
    • JS / CSS / HTML ͷͦΕͧΕ࣮૷ରԠঢ়گ
    • JSͷAPI΍CSSͷৼΔ෣͍͸ຊ౰ʹಉ͡ʁ
    • http://caniuse.com/
    • chrome.*API ͷରԠঢ়گ
    • http://www.arewewebextensionsyet.com/
    • APIͷҰཡ / ؔ࿈ bugzilla΁ͷࢀর / filterͱ͔͕
    ͋ͬͯศར
    • https://developer.mozilla.org/en-US/Add-ons/
    WebExtensions/Chrome_incompatibilities
    

    View Slide

50. NBOJGFTUKTPO
    ඇޓ׵໰୊
    

    View Slide

51. manifest.jsonඇޓ׵໰୊
    • ͍͔ͭ͘ͷະ࣮૷Ωʔ
    • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ
    • ChromeExtensionͰ͸(ݱঢ়)invalidͳ
    applicationΩʔ
    

    View Slide

52. manifest.jsonඇޓ׵໰୊
    • ͍͔ͭ͘ͷະ࣮૷Ωʔ
    • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ
    • ChromeExtensionͰ͸(ݱঢ়)invalidͳ
    applicationΩʔ
    Firefoxʹ
    ΠϯετʔϧෆՄ
    

    View Slide

53. manifest.jsonඇޓ׵໰୊
    • ͍͔ͭ͘ͷະ࣮૷Ωʔ
    • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ
    • ChromeExtensionͰ͸(ݱঢ়)invalidͳ
    applicationΩʔ
    Firefoxʹ
    ΠϯετʔϧෆՄ
    Chromeʹ
    ΠϯετʔϧෆՄ
    

    View Slide

54. ݱঢ়྆ํͰಈ͘
    NBOJGFTUKTPO
    ͸࡞Εͳ͍
    

    View Slide

55. View Slide

56. NBOJGFTUKTPO
    ͳΜͱ͔ͯ͘͠ΕΔ܅
    ࡞ͬͨ
    

    View Slide

57. 8FC&YUFOTJPO
    .BOJGFTU
    'PSNBUUFS
    

    View Slide

58. https://github.com/pastak/wemf
    

    View Slide

59. What’s wemf
    • ඞؚͣ·Ε͍ͯΔ΂͖ΩʔͱରԠ͢Δ஋Λ௥Ճ
    • ෆ଍͍ͯ͠ΔΩʔ͕͋Δ৔߹͸ package.json ͳͲ͔Βੜ੒ͭ͠
    ͭɺର࿩ΠϯλʔϑΣΠεͰੜ੒͠·͢
    • ະରԠͷΩʔΛ࡟আ
    • ݱঢ়ະରԠͷΩʔ͕͋ΔͱΠϯετʔϧʹࣦഊ͢ΔͷͰɺͦͷ
    Α͏ͳΩʔΛ࡟আ͠·͢ɻ
    • ະରԠͷΩʔϫʔυͷ࢖༻Λ௨஌
    • web_accessible_resourcesͰϫΠϧυΧʔυ͕࢖͑ͳ͍ͳͲ͕
    ͋ΔͷͰɺͦͷΑ͏ͳΩʔϫʔυΛؚΜͰ͍Δ৔߹͸࡟আͤͣ
    ʹ௨஌͠·͢ɻ
    

    View Slide

60. ͱ͜Ζ͕Ͳ͍ͬ͜
    

    View Slide

61. manifest.jsonඇޓ׵໰୊
    • ͍͔ͭ͘ͷະ࣮૷Ωʔ
    • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ
    • ChromeExtensionͰ͸(ݱঢ়)invalidͳ
    applicationΩʔ
    Firefoxʹ
    ΠϯετʔϧෆՄ
    Chromeʹ
    ΠϯετʔϧෆՄ
    

    View Slide

62. manifest.jsonඇޓ׵໰୊
    • ͍͔ͭ͘ͷະ࣮૷Ωʔ
    • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ
    • ChromeExtensionͰ͸(ݱঢ়)invalidͳ
    applicationΩʔ
    Firefoxʹ
    ΠϯετʔϧෆՄ
    Chromeʹ
    ΠϯετʔϧෆՄ
    ㊗ΞυΦϯͷID͕ແͯ͘΋
    ςετͰ͖ΔΑ͏ʹ͢Δ࢓૊Έ͕ೖͬͨɻ
    

    View Slide

63. 8FC
    &YUFOTJPO
    ࣄ࢝Ί
    

    View Slide

64. ͱʹ͔͘ಈ͔ͯ͠Έ͍ͨਓ޲͚
    • https://github.com/mdn/webextensions-examples
    • αϯϓϧ͍ͬͺ͍͋ΔͷͰద౰ʹམͱ͖ͯͯ͠Πϯετʔ
    ϧͯ͠ΈΔ
    • νϡʔτϦΞϧ
    • https://developer.mozilla.org/en-US/Add-ons/
    WebExtensions
    • https://developer.chrome.com/extensions/getstarted
    

    View Slide

65. Exports Chrome Extension
    1. manifest.json ฤू͢Δ
    • wemf ࢖͏ͱγϡοͱग़དྷΔ͸ͣ
    2. ඇޓ׵CSS / JS ରࡦ
    3. Πϯετʔϧͯ͠ಈ͔ͯ͠ΈΔ
    4. ڍಈͷո͍͠෦෼Λ try-catch ͢Δ
    • bugzilla ͱ͔ͱ͔ʹ৘ใͳ͍͔ݟΔ
    • NightlyͰࢼͯ͠ΈΔ
    • Ͳ͏͠Α͏΋ແͦ͞͏ͳΒbugzilla
    

    View Slide

66. Exports Chrome Extension
    • ͸ͯͳϒοΫϚʔΫChrome֦ுͰ΍ͬͯΈͨ
    https://speakerdeck.com/pastak/chrome-extensionwo-
    firefoxniinsutorusuru-webextensionyi-zhi-wu-yu
    

    View Slide

67. ࡞ۀEJGG
    

    View Slide

68. View Slide

69. • src/firefox/manifest.json +78
    • src/firefox/config.js +3
    • src/firefox/_locales/ja/messages.json +8
    • src/firefox/_locales/en_US/messages.json +8
    • Rakefile +3 -1
    • .gitignore +1
    • ۭߦɾߦ຤εϖʔε੔ܗͳͲ +15 -22
    

    View Slide

70. • src/firefox/manifest.json +78
    • src/firefox/config.js +3
    • src/firefox/_locales/ja/messages.json +8
    • src/firefox/_locales/en_US/messages.json +8
    • Rakefile +3 -1
    • .gitignore +1
    • ۭߦɾߦ຤εϖʔε੔ܗͳͲ +17 -24
    ࣮࣭: +46 -17
    

    View Slide

71. ΍ͬͨ͜ͱ
    

    View Slide

72. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ
    • chrome.tabs.getSelected
    • Chrome33͔ΒdeprecatedʹͳͬͯΔ
    • ·ͩChromeͰ͸ҰԠಈ࡞͢ΔAPI
    • chrome.tabs.queryͰॻ͖׵͑Δ
    

    View Slide

73. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ
    • chrome.runtime.onInstalled
    • Web Extensionʹະ࣮૷ͳAPI
    • https://bugzilla.mozilla.org/show_bug.cgi?
    id=1252871
    • ͱΓ͋͑ͣ try {…} catch (e) {…} Ͱғ͓ͬͯ͘
    • αϙʔτࡁʹͳΔͱಈ࡞͢ΔΑ͏ʹͳΔ
    

    View Slide

74. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ
    • Web SQL෦෼Λద౰ʹϞοΫͯ͠͝·͔͢
    • ϒοΫϚʔΫͷݕࡧͳͲʹWeb SQLΛ࢖ͬͯ
    ͍ͨͷͰͦͷ෦෼Λଞͷద౰ͳAPIͳͲͰॻ͖
    ׵͑Δͷ͸ϋʔυͳͷͰɺͱΓ͋͑ͣϞοΫ͠
    ͯಈ͘Α͏ʹ࣋ͪࠐΉ
    

    View Slide

75. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ
    • CSSΛ΄Μͷͪΐͬͱඍௐ੔
    

    View Slide

76. Ҡ২׬ྃ
    

    View Slide

77. ग़དྷͳ͍͜ͱ
    

    View Slide

78. • Πϯετʔϧ࣌ʹར༻ن໿ΛදࣔͰ͖ͳ͍
    • ݕࡧʹWebSQLΛར༻͍ͯ͠ΔͷͰɺҠ২ෆՄೳ
    • ΠϯετʔϧޙʹϩάΠϯ͢ΔͱϢʔβʔ৘ใͷɹ
    ࠶औಘ͕૸Βͳ͍
    • ϙοϓΞοϓͷදࣔαΠζ͕ෆ҆ఆ
    • ઃఆը໘දࣔෆՄ
    • XUL൛ͷΑ͏ʹπʔϧόʔͳͲͷࡉ΍͔ͳػೳ௥Ճ
    ͸ෆՄೳ
    

    View Slide

79. Case of Gyazo Extension
    • ͸ͯͳϒοΫϚʔΫChrome֦ுͷྫͱ΄΅ಉ͡
    • Firefox ඇରԠͷCSSͳͲΛͳΜͱ͔͢Δ
    • JSͷৼΔ෣͍ͷࠩ෼Λٵऩ
    • AMOͷϨϏϡʔ௨աରࡦ
    • innerHTMLͰࡶʹྲྀ͠ࠐΜͰ͍ͨͱ͜ΖͳͲΛஸೡʹ
    ͢Δ
    • messaging APIͳͲͷόά͕࣏Δ v47 ͕ betaೖΓ͢Δ
    λΠϛϯάͰެ։
    • ReleaseೖΓͨ͠λΠϛϯάͰgyazo.com͔Β༠ಋ
    https://github.com/gyazo/gyazo-browser-extension/pull/151/
    

    View Slide

80. Case of Gyazo Extension
    • ࢖͑ͳ͍(ະ࣮૷) / όΪʔͳAPIΛճආ
    • Clipboard / Context Menu / Storage.sync etc
    • Clipboard͸·ͩ͜Ε͔Βʁ
    • Context Menu͸imageͷ਺͚ͩitemΛaddͯ͠͠
    ·͏όά͕͕͋ͬͨv49Ͱमਖ਼
    • Storage.sync΋͜Ε͔Β
    • Storage.localͳΒ࢖͑Δ
    • Firefox SyncͷΞΧ΢ϯτͱ૊Έ߹Θͤͯɺ΍ͬ
    ͍ͯ͘ʁ
    https://github.com/gyazo/gyazo-browser-extension/pull/151/
    

    View Slide

81. ͦͷଞͷ
    ࡉ΍͔ରԠ
    5JQT঺հ
    

    View Slide

82. ϒϥ΢β֦ுϦϦʔεࣗಈԽ
    • Chrome Web Store͸API͕͋ΔͷͰϦϦʔε
    ࣗಈԽ͕Մೳ
    • JSͰϞδϡʔϧॻ͍ͯ npm/chrome-
    webstore-manager Ͱެ։ͯ͠Δ
    • AMO΋Sign༻ͷΤϯυϙΠϯτͳͲ͸͋Δ
    

    View Slide

83. GitHubͰPRΛ
    merge
    refresh
    token
    Kick!
    extension.zip
    ΛPOST
    upload
    &
    publish
    ݁ՌΛ௨஌
    %#ʹ
    UPLFOΛೖΕΔʂ
    ։ൃऀ
    

    View Slide

84. GitHubͰPRΛ
    merge
    refresh
    token
    Kick!
    extension.zip
    ΛPOST
    upload
    &
    publish
    ݁ՌΛ௨஌
    %#ʹ
    UPLFOΛೖΕΔʂ
    ։ൃऀ
    

    View Slide

85. https://github.com/pastak/chrome-extension-release-heroku
    

    View Slide

86. IFSPLVEFQMPZ
    ϘλϯҰൃͰ
    ଈ͝ར։࢝༻Մೳ
    

    View Slide

87. Staging Build
    • CI্ͰͦΕͧΕBuild & Signͯ͠ɺGitHubͷ
    DeployAPIͰ௨஌
    • ࣮ࡍʹࣾ಺ͳͲͰࢼͯ͠໯ͬͨޙʹެ։
    

    View Slide

88. Install Staging Build
    • Chrome Extension͸खݩͰSignՄೳ
    • Πϯετʔϧ͸Ұ౓ϩʔΧϧΛܦ༝͢Δඞཁ͕͋Δ
    • Web Extension͸AMOΛܦ༝ͯ͠Sign
    • SignAPIΛར༻͢Δͱ਺ेඵͰSign͞Εͯμ΢ϯϩʔυ༻URL
    ͕ൃߦ͞ΕΔ
    • ຊ൪༻ͱ͸ҧ͏idΛ෇͚͓ͯ͘ඞཁ͕͋Δ
    • Version΋ຖճ্͕Βͳ͍ͱ͍͚ͳ͍
    • ͜ͷล͸Build࣌ʹྑ͍ײ͡ʹ
    • Version Λ YY.MM.DD.HHmm ͱ͔ʹ͢Δͱvalid׌ͭྑ
    ͍ײ͡ʹͳΔʁ
    

    View Slide

89. ΤϥʔϝοηʔδϋϯυϦϯά
    • ChromeͩͱɺChrome Web Store΍GoogleͷϩάΠϯ
    ϖʔδͳͲʹcontent scriptΛinjection͠Α͏ͱ͢Δͱ
    ʰ~~cannot be scriptedʱͱ͍͏message͕ඈΜͰ͘Δ
    • Firefox͸࣮૷͕ҧ͍ͦ͏ͳͷͰɺྑ͍ײ͡ʹ͍ͯ͠
    ͘ඞཁ͕͋Γͦ͏
    • ͦͷΑ͏ͳϖʔδͰ͸ injectionग़དྷͳ͍ͷͰɺϘλϯ
    Λdisableʹ͢Δ
    

    View Slide

90. chrome.tabs.captureCurrentTab
    • RetinaσΟεϓϨΠͳͲͷHigh DPI؀ڥରࡦ
    • GyazoExtensionͰ͸window.devicePixelRatioͳͲΛ
    ར༻ͯ͠αΠζΛॖখͨ͠Γ͍ͯ͠Δ
    • ChromeͱFirefoxͰ͸औಘͰ͖Δը૾ͷαΠζ͕ҟͳΔ
    • Chrome: ࣮ϐΫηϧ਺ͷΩϟϓνϟ
    • Firefox: දࣔϐΫηϧαΠζͷΩϟϓνϟ
    • Retinaͷ৔߹ɺFirefoxͰऔಘͰ͖ΔΩϟϓνϟͷ
    ը૾ͷԣ/ॎ෯͸Chromeͷ1/2ʹͳΔ
    

    View Slide

91. moz-extension://ͷѻ͍
    • chrome-extension:// ΋ಉ౳ʹѻ͓͏ͱ͍͏issue
    ͕͋Δ͜ͱʹ͸͋Δ
    • CSSͷதͰ__MSG_@@extension_id__Λల։͠
    ͨΓग़དྷͳ͍
    • HTML಺ʹmoz-extension:// ͷը૾ͳͲΛల։
    ͢ΔͱCSPʹҾ͔͔ͬΔ
    • Blob΋ಉ༷ͷ໰୊Λ๊͍͑ͯΔ
    

    View Slide

92. ·ͱΊ
    

    View Slide

93. ·ͱΊ
    • Chrome ExtensionͱFirefoxͷWeb Extension͸ͦΕͳ
    Γʹޓ׵͕͋Δ
    • ·ͩWebExtensionʹ͸ະ࣮૷ͩͬͨΓ଍Γͳ͍෦෼
    ͕͋ΔͷͰɺͦͷ͋ͨΓ͸ͲΜͲΜࢦఠ͍ͯ͘͠ͱ
    ྑͦ͞͏
    • ϒϥ΢β֦ு͕͋Δ͔Βͦ͜ఏڙͰ͖Δମݧ͕͋Δ
    ͸ͣͳͷͰɺͦͷลΓ͕1ͭͷن֨ͷதͰఏڙͰ͖Δ
    ͷ͸ྑ͍͜ͱ
    • Edge͸ޙ௥͍ͦ͠͏ɻSafari͸Ͳ͏ͳΔʁʁ
    

    View Slide

94. ͜ͷൃදͰ
    ڵຯΛ࣋ͬͨ
    ͋ͳͨʂʂʂ
    

    View Slide

95. ϒϥ΢β֦ு
    ։ൃ༑ͩͪʹ
    ͳΓ·͠ΐ͏
    

    View Slide

96. http://www.irasutoya.com/2015/04/blog-post_642.html
    http://www.irasutoya.com/2013/08/blog-post_2234.html
    http://www.irasutoya.com/2013/07/blog-post_2112.html
    

    View Slide

97. ͦΕͱ
    ౤ථ΋པΉ
    
    https://vote.yapcasia8oji-2016mid.hachiojipm.org/talk/64/vote_form
    

    View Slide

98. ৘ใऩूϦϯΫू
    • https://blog.mozilla.org/addons/
    • Mozilla Addonϒϩάʹఆظతʹ৘ใࡌΔ
    • http://www.arewewebextensionsyet.com/
    • ࣮૷ঢ়گ΍όάͳͲΛͬ͟ͱҰཡͰ͖Δ
    • https://developer.mozilla.org/en-US/Add-ons/WebExtensions
    • MDNͷ։ൃऀ޲͚υΩϡϝϯτ
    • https://bugzilla.mozilla.org/buglist.cgi?
    component=WebExtensions&product=Toolkit&bug_status=_
    _open__&list_id=13093986
    • WebExtensionؔ࿈ͷissueҰཡ
    

    View Slide