ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #builderscon

builderscon 2017 tokyo https://builderscon.io/tokyo/2017/session/fecbae0b-1097-44c1-91aa-9a1f47dc496b

code for demo: https://github.com/pastak/builderscon2017-tokyo-demo

Transcript

1. ϒϥ΢β֦ுͷΫϩε
   ϒϥ΢βରԠʹ͍ͭͯ
   Ͳ͏޲͖߹͍ͬͯΔ͔
   Pasta-K
   builderscon tokyo 2017
   pasta0915@gmail.com /pastak@notainc.com
   

   View Slide

2. @pastakɹ
   

   View Slide

3. @pastakɹ
   • ژ౎େֶ޻ֶ෦৘ใֶՊɹɹɹɹɹɹɹ
   ܭࢉػՊֶίʔε5ճੜ
   • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ
   • React / Ruby on Rails
   • Browser Extension
   • ژେϚΠίϯΫϥϒ
   

   View Slide

4. SW-3377-1978-8675
   

   View Slide

5. gyazo.com
   

   View Slide

6. scrapbook.io
   

   View Slide

7. View Slide

8. View Slide

9. དྷिͷ༵ۚɺձࣾͷ༷ࢠ͕ςϨ
   Ϗʹग़ΔͷͰݟ͍ͯͩ͘͞
   

   View Slide

10. ژbizX
    8/11(Fri) ࢁͷ೔ 21:00ʙ
    KBSژ౎
    

    View Slide

11. ์ૹΤϦΞ
    

    View Slide

12. View Slide

13. ϫϯηά࣋ͬͯ
    ژ౎ʹߦ͜͏
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. and
    

    View Slide

18. Gyazo Extension for Edge
    is coming soon!!
    

    View Slide

19. ໨࣍
    • ϒϥ΢β֦ுݱঢ়֬ೝ 2017 Summer
    • Ϋϩεϒϥ΢βରԠ։ൃ؀ڥҰྫ঺հ
    • ֤ϒϥ΢βޓ׵ੑঢ়گ঺հ
    

    View Slide

20. ओͳλʔήοτ
    • ϒϥ΢β֦ுͷݱঢ়Λͬ͘͟Γ೺Ѳ͍ͨ͠ਓ
    • Chrome ExtensionΛFirefox / Edge޲͚ʹ΋
    ఏڙ͍ͨ͠ਓ
    

    View Slide

21. ࿩͢͜ͱ
    • ϒϥ΢β֦ுͷ֤ϒϥ΢βͷঢ়گ
    • ϒϥ΢βͷࠩҟΛٵऩ͢ΔͨΊͷ޻෉
    • ۃྗ1ͭͷίʔυ͔Βੜ੒Ͱ͖ΔΑ͏ʹ
    • ͦΕΒͷ࣮ԋ
    

    View Slide

22. ࿩͞ͳ͍͜ͱ
    • Safari Extensionʹؔ͢Δ͜ͱ
    • ϒϥ΢β֦ுҠ২ʹؔ͢Δ۩ମత͔ͭࡉ΍͔ͳςΫχοΫ
    • ະ࣮૷ͷAPI΍࣮૷ʹόάͷ͋ΔAPIͱͷ޲͖߹͍ํ͸ҎԼͷࢿྉ
    ΛͲ͏ͧ
    • BrowserExtension࢛ํࢁ࿩ https://speakerdeck.com/pastak/
    browserextensionsi-fang-shan-hua-number-yapc8oji
    • Chrome ExtensionΛ FirefoxʹΠϯετʔϧ͢Δ -
    WebExtensionҠ২෺ޠ https://speakerdeck.com/pastak/
    chrome-extensionwo-firefoxniinsutorusuru-webextensionyi-zhi-
    wu-yu
    

    View Slide

23. ຊ೔ͷσϞʹ࢖༻͢Δαϯϓϧ
    • https://github.com/pastak/builderscon2017-tokyo-
    demo
    • ࢀߟαϯϓϧू
    • https://github.com/mdn/webextensions-
    examples
    • https://developer.chrome.com/extensions/
    samples
    

    View Slide

24. ϒϥ΢β֦ுݱঢ়֬ೝ
    2017 Summer
    

    View Slide

25. ϒϥ΢β֦ுঢ়گ
    • Chrome Extensionͱޓ׵ͷ͋ΔAPIΛར༻࣮ͨ͠૷͕
    FirefoxͱEdgeʹࡌ͍ͬͯΔ
    • Firefox͸Android൛΋Ұ෦APIΛαϙʔτ͍ͯ͠Δ
    • Edge΋”Anniversary Update”Ҏ߱͸࣮૷͕ࡌͬͯ
    ͍·͢
    • Firefox͸2017೥11݄14೔(༧ఆ)ʹstableʹͳΔ
    Firefox v57͔ΒWebExtensionͷΈͷαϙʔτʹͳΔ
    

    View Slide

26. Firefox v57΁ͷϩʔυϚοϓ
    • “Firefox will only run WebExtensions.”
    • ͜Ε·ͰͷAPIΛར༻͍ͯ͠ΔΞυΦϯΛ৽ن
    ʹAMOʹొ࿥͢Δ͜ͱ͸ෆՄೳʹͳ͍ͬͯΔ
    • ެ։ࡁΈͷ΋ͷΛΞοϓσʔτ͢Δ͜ͱ͸ग़
    དྷΔ͕ɺAPIͷαϙʔτ͕ԕ͘ͳ͍ະདྷʹ੾
    ΒΕΔՄೳੑ͕͋ΔͷͰɺૣΊͷߋ৽Λ
    The Road to Firefox 57 – Compatibility Milestones | Mozilla Add-ons Blog
    https://blog.mozilla.org/addons/2017/02/16/the-road-to-firefox-57-compatibility-milestones/
    

    View Slide

27. W3C Browser Extension Community
    Group
    • ϒϥ΢β֦ுͷඪ४ԽΛ໨ࢦ͍ͯ͠Δ
    • ݱࡏ Draft Community Group Report Λެ։
    ͍ͯ͠Δ
    • https://browserext.github.io/browserext/
    • APIҎ֎ʹ΋packaging΍testing΋ؚΉ
    

    View Slide

28. ϒϥ΢β֦ுAPIυΩϡϝϯτ
    • Chrome
    • https://developer.chrome.com/extensions
    • Firefox
    • https://developer.mozilla.org/en-US/Add-ons/
    WebExtensions
    • https://wiki.mozilla.org/WebExtensions
    • Edge
    • https://docs.microsoft.com/en-us/microsoft-edge/extensions
    

    View Slide

29. Porting Chrome Extension
    • mozilla/web-ext
    • WebExtensionͷͨΊͷπʔϧ
    • sign, linter, build, debug
    • Microsoft Edge Extension Toolkit
    • manifest.jsonͳͲͷvalidateΛͯ͘͠ΕΔ
    

    View Slide

30. View Slide

31. ಉ͡ίʔυ͔Βಈ͘ϒϥ΢β֦ு
    ͕࡞ΕΔϒϥ΢βͨͪ
    

    View Slide

32. View Slide

33. օ͞Μͷ
    ৺ͷ੠
    

    View Slide

34. ෳ਺ͷϒϥ΢βͰ
    ಉ͡ίʔυ͕ಈ͘
    ͳΜͯޱ͚ͩͰ
    ্ख͍͘͘༁ͳ͍
    Ͱ͠ΐ
    

    View Slide

35. զʑ͸͢Ͱʹ
    *&ͷ࣌ʹΫϩεϒ
    ϥ΢βͷۤ࿑Λ
    ܦݧ͍ͯ͠ΔΜͩ
    

    View Slide

36. View Slide

37. ͸͍
    

    View Slide

38. ਖ਼ղ
    

    View Slide

39. ͪΐͬͱ޻෉
    ͕ඞཁ
    ͍ͩͿྑ͘͸
    ͳ͖ͬͯͨ
    
    

    View Slide

40. ͱ͍͏Θ͚Ͱ
    ΍͍͖ͬͯํ
    ͷҰྫ
    Λ঺հ͠·͢
    

    View Slide

41. Ϋϩεϒϥ΢βͷͨΊͷ
    ։ൃ؀ڥߏங
    

    View Slide

42. ͋ͷࠒ͔Β͸
    ࣌୅͕ਐΈ
    զʑʹ͸#BCFM
    ͕͋Δ
    

    View Slide

43. ର৅͕$ISPNF
    'JSFGPY &EHF
    ͩͬͨΒͳΜͱ͔
    ͳΔͷͰ͸ʁ
    

    View Slide

44. ͱ͜Ζ͕
    Ͳ͍ͬ͜
    ͦ͏͸໰԰͕
    Է͞ͳ͍
    

    View Slide

45. ͦͷ··Chrome ExtensionΛଞͷ
    ϒϥ΢βͰಈ͔ͦ͏ͱ͢Δͱ…
    

    View Slide

46. ͦͷ··Chrome ExtensionΛଞͷ
    ϒϥ΢βͰಈ͔ͦ͏ͱ͢Δͱ…
    • manifest.json͕invalidͰΠϯετʔϧෆՄ
    • APIΛఏڙ͢ΔObject໊͕ҟͳΔͷͰಈ࡞͠ͳ
    ͍
    • (ͦ΋ͦ΋API͕ະ࣮૷)
    

    View Slide

47. View Slide

48. manifest.jsonͱ޲͖߹͏
    

    View Slide

49. manifest.jsonঢ়گ
    • https://developer.mozilla.org/en-US/Add-
    ons/WebExtensions/
    Browser_compatibility_for_manifest.json
    • Firefox͚͕࣮ͩ૷͍ͯ͠ΔΩʔ΍Chromeͩ
    ͚͕࣮૷͍ͯ͠ΔΩʔ͕͋Δ
    

    View Slide

50. ※ Firefoxͷ࣮૷͕ྑ͘ݟ͑Δͷ͸mdnͷࢿྉ͕Firefoxͷ࣮૷Λݩʹهࣄ͕ॻ͔Ε͍ͯΔͨΊ
    

    View Slide

51. https://github.com/pastak/wemf
    https://www.npmjs.com/package/wemf
    

    View Slide

52. WebExtension Manifest Formatter
    • manifest.jsonΛ৯ΘͤΔͱྑ͍ײ͡ʹม׵͠
    ͯ͘ΕΔ܅
    • Chrome / Firefox / Edge ͦΕͧΕΛλʔ
    ήοτʹࢦఆ͢ΔͱͦΕΒͷ؀ڥͰಈ࡞͠
    ͳ͍ΩʔΛ࡟আͨ͠ΓɺඞཁͳΩʔؚ͕·
    Ε͍ͯΔ͔ͷνΣοΫΛͯ͘͠ΕΔ
    

    View Slide

53. wemf usage example
    • Firefox͸applicationΩʔ͕ඞཁ
    • Firefox v48͔Βෆཁʹ
    • ͍ͭͷؒʹ͔EdgeͷυΩϡϝϯτ͔Β΋ফ͑ͯͨ…
    • Edge͸authorΩʔ͕ඞཁ(͜Ε͕ͳ͍ͱΠϯετʔϧͰίέ
    Δ)
    • Chrome͸sidebarΛະαϙʔτͳͲ
    

    View Slide

54. DEMO
    borderify΍annotate-pageͷmanifestΛม׵ͯ͠
    ΠϯετʔϧՄೳʹͳΔ͜ͱΛ֬ೝ͢Δ
    https://github.com/pastak/builderscon2017-tokyo-demo
    

    View Slide

55. ͦ΋ͦ΋ͷAPIΛఏڙ͢Δ
    Object໊͕ҟͳΔ໰୊
    

    View Slide

56. APIΛఏڙ͢ΔObject໊
    • Chrome
    • chrome
    • Edge
    • browser
    • Firefox
    • chrome / browser
    • Standard͸ browser ʹͳΔ͸ͣ
    

    View Slide

57. https://github.com/pastak/chrome-browser-object-polyfill
    https://www.npmjs.com/package/chrome-browser-object-polyfill
    

    View Slide

58. pollyfillॻ͍ͨ
    • chrome / browserͲͪΒ͔ΒͰ΋APIΛݺͼग़
    ͤΔΑ͏ʹ͢Δ
    • ଟ෼ࠓޙ͸browserΛ࢖͏͜ͱʹͳΔͩΖ͏͔
    ΒͦͬͪͰॻ͍͓ͯ͘ͱྑͦ͞͏
    

    View Slide

59. DEMO
    list_cookieͱset_icon_pathΛ
    FirefoxͱChromeͰಈ͔ͯ͠ΈΔ
    https://github.com/pastak/builderscon2017-tokyo-demo
    

    View Slide

60. APIΛఏڙ͢ΔObject໊
    • Chrome
    • chrome
    • Edge
    • browser
    • Firefox
    • chrome / browser
    ← Firefox͚ͩ͸PromiseΛฦ͢
    (ଞ͸PromiseΛฦ͞ͳ͍)
    

    View Slide

61. Firefox͸PromiseΛฦ͢
    • Chrome΍Edge͸࠷ऴҾ਺ʹcallbackΛऔΔ
    • mdnʹ͸ฏવͱPromiseΛฦ͢ͱॻ͍ͯ͋Δ
    • ਖ਼௚ɺChrome΋Promiseฦͯ͠ཉ͍͠
    

    View Slide

62. then-chrome
    • https://github.com/acvetkov/then-chrome
    • APIΛPromiseͰϥοϓͨ͠΋ͷΛఏڙͯ͘͠
    ΕΔ
    

    View Slide

63. polyfillͱ૊Έ߹ΘͤΔ
    • Chrome / Firefox / EdgeͷશͯͰಉ͡Α͏ʹAPIΛݺ
    ͼग़ͤΔΑ͏ʹͳΔ
    • browser.tabs.get({}).then() Έ͍ͨͳײ͡Ͱॻ͍͍ͯ͘
    • ্ه3ϒϥ΢β͸async-awaitΛαϙʔτ͍ͯ͠Δͷ
    Ͱɺ
    • await browser.tabs.get({}) ͱ͔΋ॻ͚Δ
    

    View Slide

64. DEMO
    webpack-moduleͷαϯϓϧΛ3ϒϥ΢βͰ
    ಈ͘Α͏ʹग़དྷΔ͜ͱΛ֬ೝͯ͠ΈΔ
    https://github.com/pastak/builderscon2017-tokyo-demo
    

    View Slide

65. ͜͜·Ͱͷ·ͱΊ
    • wemfͰmanifest.jsonͷࠩ෼Λٵऩ
    • polyfillͰchrome/browserͷࠩ෼Λٵऩ
    • then-chromeͰPromiseԽ
    

    View Slide

66. ͜͜·Ͱͷ·ͱΊ
    • wemfͰmanifest.jsonͷࠩ෼Λٵऩ
    • polyfillͰchrome/browserͷࠩ෼Λٵऩ
    • then-chromeͰPromiseԽ
    • ͜͜·ͰͰܰΊͷ֦ுͳΒҠߦ੒ޭ͢Δ͸ͣ
    

    View Slide

67. ະ࣮૷ͷAPIͱ޲͖߹͏
    

    View Slide

68. جຊ࡞ઓ
    

    View Slide

69. ࣮૷Λ଴ͭ
    

    View Slide

70. View Slide

71. ৘ใΛ͔ͭΉ
    • Are we WebExtension yet
    • https://arewewebextensionsyet.com/
    • ֤APIͷ࣮૷ঢ়گɾط஌ͷόάɺؔ࿈bugzilla΁
    ͷϦϯΫ
    • Firefox޲͚ʹҠ২͢Δ࣌͸ͬ͟ͱ໨Λ௨͢ͱྑ
    ͦ͞͏
    

    View Slide

72. ৘ใΛ͔ͭΉ
    • EdgeͷαϙʔτAPI৘ใ͸͜͜ʹࡌͬͯΔ
    • https://docs.microsoft.com/en-us/
    microsoft-edge/extensions/api-support/
    supported-apis
    • ط஌ͷόάͱChromeͱͷ૬ҧ఺͕ݟ΍͘͢·
    ͱ·ͬͯͯΦεεϝ
    

    View Slide

73. bug trackerΛ௚઀ݟΔ
    • Extensionؔ܎ͷ໰୊ͰมΘͬͨͷʹϋϚΔͱใ
    ࠂ͞Εͯͳ͍৽͍͠όάʹૺ۰͕ͪ͠
    • ͦͯ͠ҙ֎ͱΑ͘ૺ۰͢Δ
    • tabs.captureVisibleTabͱ͔
    tabs.executeScriptͱ͔ͷৼΔ෣͍Λใࠂ͠
    ͨ͜ͱ͕͋Δ
    

    View Slide

74. bug trackerΛ௚઀ݟΔ
    • Firefox
    • https://bugzilla.mozilla.org/
    • Extension΍AddonҠߦ࣌ʹෆ଍͍ͯ͠ΔAPIͷ৘ใͳͲΛ
    ٻΊ͍ͯΔͷͰɺҠߦΛݕ౼͍ͯ͠Δਓ͸ૣΊʹௐࠪͯ͠఻
    ͑Δͱ٢
    • Edge
    • https://developer.microsoft.com/en-us/microsoft-edge/
    platform/issues/
    

    View Slide

75. ಈ͔ͯ͠ΈͨΒൃ֮ͨ͠ͷͰ
    ճආͨ͠ྫ
    • EdgeͩͱTab Objectʹwidth/height͕༩͑Β
    Εͳ͍
    

    View Slide

76. ؾ߹͍Ͱ΍͍͔ͬͯ͘͠ͳ͍
    • ͸͍ɾɾɾ
    • try{}catch(e){}Ͱࣺͯͯ͠·͏…
    • ະདྷͷΞοϓσʔτʹظ଴
    

    View Slide

77. try-catchͰ΍͍ͬͯ͘ྫ
    

    View Slide

78. ͦͷଞࡉ΍͔ͳ͜ͱ
    • Extension API͸͜ΕͰղܾ͕ͨ͠ɺpopup.html಺
    ͷCSS΍content scriptͳͲ͸͜Ε·Ͱ௨Γϒϥ΢
    β͝ͱͷରԠΛผ్֬ೝ͢Δඞཁ͕͋Δ
    • ͏ͬ͏͏͏……
    • Firefox͸web-extͰlintͰ͖ΔͷͰΦεεϝͰ͢
    

    View Slide

79. ·ͱΊ
    • ϒϥ΢β֦ுք͸Chrome ExtensionΛϕʔε
    ʹͯ͠ඪ४Խ͞Εͭͭ͋Δ
    • Firefox͸೥຤ʹ͸WebExtensionͷΈʹͳΔ
    • manifest.jsonͱAPIඇޓ׵ͷ෦෼Λղܾ͢Δͨ
    ΊͷςΫχοΫΛ঺հ͠·ͨ͠
    

    View Slide

80. ͕࣌ؒ༨ͬͨΒ
    • Gyazo ExtensionͷΫϩεϒϥ΢βରԠࡁΈ֬
    ೝσϞϯετϨʔγϣϯ
    • ͦͷଞ FAQ͋Ε͹
    

    View Slide