ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #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
2. @pastakɹ
3. @pastakɹ • ژ౎େֶ޻ֶ෦৘ใֶՊɹɹɹɹɹɹɹ ܭࢉػՊֶίʔε5ճੜ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • React / Ruby on Rails • Browser Extension • ژେϚΠίϯΫϥϒ
4. SW-3377-1978-8675
5. gyazo.com
6. scrapbook.io
9. དྷिͷ༵ۚɺձࣾͷ༷ࢠ͕ςϨ Ϗʹग़ΔͷͰݟ͍ͯͩ͘͞
10. ژbizX 8/11(Fri) ࢁͷ೔ 21:00ʙ KBSژ౎
11. ์ૹΤϦΞ
13. ϫϯηά࣋ͬͯ
    ژ౎ʹߦ͜͏
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
15. https://chrome.google.com/webstore/detail/gyazo/ ffdaeeijbbijklfcpahbghahojgfgebo
16. https://addons.mozilla.org/ja/firefox/addon/gyazo-official/
17. and
18. Gyazo Extension for Edge is coming soon!!
19. ໨࣍ • ϒϥ΢β֦ுݱঢ়֬ೝ 2017 Summer • Ϋϩεϒϥ΢βରԠ։ൃ؀ڥҰྫ঺հ • ֤ϒϥ΢βޓ׵ੑঢ়گ঺հ
20. ओͳλʔήοτ • ϒϥ΢β֦ுͷݱঢ়Λͬ͘͟Γ೺Ѳ͍ͨ͠ਓ • Chrome ExtensionΛFirefox / Edge޲͚ʹ΋ ఏڙ͍ͨ͠ਓ
21. ࿩͢͜ͱ • ϒϥ΢β֦ுͷ֤ϒϥ΢βͷঢ়گ • ϒϥ΢βͷࠩҟΛٵऩ͢ΔͨΊͷ޻෉ • ۃྗ1ͭͷίʔυ͔Βੜ੒Ͱ͖ΔΑ͏ʹ • ͦΕΒͷ࣮ԋ
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
23. ຊ೔ͷσϞʹ࢖༻͢Δαϯϓϧ • https://github.com/pastak/builderscon2017-tokyo- demo • ࢀߟαϯϓϧू • https://github.com/mdn/webextensions- examples • https://developer.chrome.com/extensions/ samples
24. ϒϥ΢β֦ுݱঢ়֬ೝ 2017 Summer
25. ϒϥ΢β֦ுঢ়گ • Chrome Extensionͱޓ׵ͷ͋ΔAPIΛར༻࣮ͨ͠૷͕ FirefoxͱEdgeʹࡌ͍ͬͯΔ • Firefox͸Android൛΋Ұ෦APIΛαϙʔτ͍ͯ͠Δ • Edge΋”Anniversary Update”Ҏ߱͸࣮૷͕ࡌͬͯ ͍·͢ • Firefox͸2017೥11݄14೔(༧ఆ)ʹstableʹͳΔ Firefox v57͔ΒWebExtensionͷΈͷαϙʔτʹͳΔ
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/
27. W3C Browser Extension Community Group • ϒϥ΢β֦ுͷඪ४ԽΛ໨ࢦ͍ͯ͠Δ • ݱࡏ Draft Community Group Report Λެ։ ͍ͯ͠Δ • https://browserext.github.io/browserext/ • APIҎ֎ʹ΋packaging΍testing΋ؚΉ
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
29. Porting Chrome Extension • mozilla/web-ext • WebExtensionͷͨΊͷπʔϧ • sign, linter, build, debug • Microsoft Edge Extension Toolkit • manifest.jsonͳͲͷvalidateΛͯ͘͠ΕΔ
31. ಉ͡ίʔυ͔Βಈ͘ϒϥ΢β֦ு ͕࡞ΕΔϒϥ΢βͨͪ
33. օ͞Μͷ
    ৺ͷ੠
34. ෳ਺ͷϒϥ΢βͰ ಉ͡ίʔυ͕ಈ͘ ͳΜͯޱ͚ͩͰ
    ্ख͍͘͘༁ͳ͍ Ͱ͠ΐ
35. զʑ͸͢Ͱʹ
    *&ͷ࣌ʹΫϩεϒ ϥ΢βͷۤ࿑Λ
    ܦݧ͍ͯ͠ΔΜͩ
37. ͸͍
38. ਖ਼ղ
39. ͪΐͬͱ޻෉ ͕ඞཁ
    ͍ͩͿྑ͘͸ ͳ͖ͬͯͨ
40. ͱ͍͏Θ͚Ͱ
    ΍͍͖ͬͯํ
    ͷҰྫ
    Λ঺հ͠·͢
41. Ϋϩεϒϥ΢βͷͨΊͷ ։ൃ؀ڥߏங
42. ͋ͷࠒ͔Β͸
    ࣌୅͕ਐΈ
    զʑʹ͸#BCFM ͕͋Δ
43. ର৅͕$ISPNF
    'JSFGPY
    &EHF ͩͬͨΒͳΜͱ͔ ͳΔͷͰ͸ʁ
44. ͱ͜Ζ͕
    Ͳ͍ͬ͜
    ͦ͏͸໰԰͕
    Է͞ͳ͍
45. ͦͷ··Chrome ExtensionΛଞͷ ϒϥ΢βͰಈ͔ͦ͏ͱ͢Δͱ…
46. ͦͷ··Chrome ExtensionΛଞͷ ϒϥ΢βͰಈ͔ͦ͏ͱ͢Δͱ… • manifest.json͕invalidͰΠϯετʔϧෆՄ • APIΛఏڙ͢ΔObject໊͕ҟͳΔͷͰಈ࡞͠ͳ ͍ • (ͦ΋ͦ΋API͕ະ࣮૷)
48. manifest.jsonͱ޲͖߹͏
49. manifest.jsonঢ়گ • https://developer.mozilla.org/en-US/Add- ons/WebExtensions/ Browser_compatibility_for_manifest.json • Firefox͚͕࣮ͩ૷͍ͯ͠ΔΩʔ΍Chromeͩ ͚͕࣮૷͍ͯ͠ΔΩʔ͕͋Δ
50. ※ Firefoxͷ࣮૷͕ྑ͘ݟ͑Δͷ͸mdnͷࢿྉ͕Firefoxͷ࣮૷Λݩʹهࣄ͕ॻ͔Ε͍ͯΔͨΊ
51. https://github.com/pastak/wemf https://www.npmjs.com/package/wemf
52. WebExtension Manifest Formatter • manifest.jsonΛ৯ΘͤΔͱྑ͍ײ͡ʹม׵͠ ͯ͘ΕΔ܅ • Chrome / Firefox / Edge ͦΕͧΕΛλʔ ήοτʹࢦఆ͢ΔͱͦΕΒͷ؀ڥͰಈ࡞͠ ͳ͍ΩʔΛ࡟আͨ͠ΓɺඞཁͳΩʔؚ͕· Ε͍ͯΔ͔ͷνΣοΫΛͯ͘͠ΕΔ
53. wemf usage example • Firefox͸applicationΩʔ͕ඞཁ • Firefox v48͔Βෆཁʹ • ͍ͭͷؒʹ͔EdgeͷυΩϡϝϯτ͔Β΋ফ͑ͯͨ… • Edge͸authorΩʔ͕ඞཁ(͜Ε͕ͳ͍ͱΠϯετʔϧͰίέ Δ) • Chrome͸sidebarΛະαϙʔτͳͲ
54. DEMO borderify΍annotate-pageͷmanifestΛม׵ͯ͠ ΠϯετʔϧՄೳʹͳΔ͜ͱΛ֬ೝ͢Δ https://github.com/pastak/builderscon2017-tokyo-demo
55. ͦ΋ͦ΋ͷAPIΛఏڙ͢Δ Object໊͕ҟͳΔ໰୊
56. APIΛఏڙ͢ΔObject໊ • Chrome • chrome • Edge • browser • Firefox • chrome / browser • Standard͸ browser ʹͳΔ͸ͣ
57. https://github.com/pastak/chrome-browser-object-polyfill https://www.npmjs.com/package/chrome-browser-object-polyfill
58. pollyfillॻ͍ͨ • chrome / browserͲͪΒ͔ΒͰ΋APIΛݺͼग़ ͤΔΑ͏ʹ͢Δ • ଟ෼ࠓޙ͸browserΛ࢖͏͜ͱʹͳΔͩΖ͏͔ ΒͦͬͪͰॻ͍͓ͯ͘ͱྑͦ͞͏
59. DEMO list_cookieͱset_icon_pathΛ FirefoxͱChromeͰಈ͔ͯ͠ΈΔ https://github.com/pastak/builderscon2017-tokyo-demo
60. APIΛఏڙ͢ΔObject໊ • Chrome • chrome • Edge • browser • Firefox • chrome / browser ← Firefox͚ͩ͸PromiseΛฦ͢ (ଞ͸PromiseΛฦ͞ͳ͍)
61. Firefox͸PromiseΛฦ͢ • Chrome΍Edge͸࠷ऴҾ਺ʹcallbackΛऔΔ • mdnʹ͸ฏવͱPromiseΛฦ͢ͱॻ͍ͯ͋Δ • ਖ਼௚ɺChrome΋Promiseฦͯ͠ཉ͍͠
62. then-chrome • https://github.com/acvetkov/then-chrome • APIΛPromiseͰϥοϓͨ͠΋ͷΛఏڙͯ͘͠ ΕΔ
63. polyfillͱ૊Έ߹ΘͤΔ • Chrome / Firefox / EdgeͷશͯͰಉ͡Α͏ʹAPIΛݺ ͼग़ͤΔΑ͏ʹͳΔ • browser.tabs.get({}).then() Έ͍ͨͳײ͡Ͱॻ͍͍ͯ͘ • ্ه3ϒϥ΢β͸async-awaitΛαϙʔτ͍ͯ͠Δͷ Ͱɺ • await browser.tabs.get({}) ͱ͔΋ॻ͚Δ
64. DEMO webpack-moduleͷαϯϓϧΛ3ϒϥ΢βͰ ಈ͘Α͏ʹग़དྷΔ͜ͱΛ֬ೝͯ͠ΈΔ https://github.com/pastak/builderscon2017-tokyo-demo
65. ͜͜·Ͱͷ·ͱΊ • wemfͰmanifest.jsonͷࠩ෼Λٵऩ • polyfillͰchrome/browserͷࠩ෼Λٵऩ • then-chromeͰPromiseԽ
66. ͜͜·Ͱͷ·ͱΊ • wemfͰmanifest.jsonͷࠩ෼Λٵऩ • polyfillͰchrome/browserͷࠩ෼Λٵऩ • then-chromeͰPromiseԽ • ͜͜·ͰͰܰΊͷ֦ுͳΒҠߦ੒ޭ͢Δ͸ͣ
67. ະ࣮૷ͷAPIͱ޲͖߹͏
68. جຊ࡞ઓ
69. ࣮૷Λ଴ͭ
71. ৘ใΛ͔ͭΉ • Are we WebExtension yet • https://arewewebextensionsyet.com/ • ֤APIͷ࣮૷ঢ়گɾط஌ͷόάɺؔ࿈bugzilla΁ ͷϦϯΫ • Firefox޲͚ʹҠ২͢Δ࣌͸ͬ͟ͱ໨Λ௨͢ͱྑ ͦ͞͏
72. ৘ใΛ͔ͭΉ • EdgeͷαϙʔτAPI৘ใ͸͜͜ʹࡌͬͯΔ • https://docs.microsoft.com/en-us/ microsoft-edge/extensions/api-support/ supported-apis • ط஌ͷόάͱChromeͱͷ૬ҧ఺͕ݟ΍͘͢· ͱ·ͬͯͯΦεεϝ
73. bug trackerΛ௚઀ݟΔ • Extensionؔ܎ͷ໰୊ͰมΘͬͨͷʹϋϚΔͱใ ࠂ͞Εͯͳ͍৽͍͠όάʹૺ۰͕ͪ͠ • ͦͯ͠ҙ֎ͱΑ͘ૺ۰͢Δ • tabs.captureVisibleTabͱ͔ tabs.executeScriptͱ͔ͷৼΔ෣͍Λใࠂ͠ ͨ͜ͱ͕͋Δ
74. bug trackerΛ௚઀ݟΔ • Firefox • https://bugzilla.mozilla.org/ • Extension΍AddonҠߦ࣌ʹෆ଍͍ͯ͠ΔAPIͷ৘ใͳͲΛ ٻΊ͍ͯΔͷͰɺҠߦΛݕ౼͍ͯ͠Δਓ͸ૣΊʹௐࠪͯ͠఻ ͑Δͱ٢ • Edge • https://developer.microsoft.com/en-us/microsoft-edge/ platform/issues/
75. ಈ͔ͯ͠ΈͨΒൃ֮ͨ͠ͷͰ ճආͨ͠ྫ • EdgeͩͱTab Objectʹwidth/height͕༩͑Β Εͳ͍
76. ؾ߹͍Ͱ΍͍͔ͬͯ͘͠ͳ͍ • ͸͍ɾɾɾ • try{}catch(e){}Ͱࣺͯͯ͠·͏… • ະདྷͷΞοϓσʔτʹظ଴
77. try-catchͰ΍͍ͬͯ͘ྫ
78. ͦͷଞࡉ΍͔ͳ͜ͱ • Extension API͸͜ΕͰղܾ͕ͨ͠ɺpopup.html಺ ͷCSS΍content scriptͳͲ͸͜Ε·Ͱ௨Γϒϥ΢ β͝ͱͷରԠΛผ్֬ೝ͢Δඞཁ͕͋Δ • ͏ͬ͏͏͏…… • Firefox͸web-extͰlintͰ͖ΔͷͰΦεεϝͰ͢
79. ·ͱΊ • ϒϥ΢β֦ுք͸Chrome ExtensionΛϕʔε ʹͯ͠ඪ४Խ͞Εͭͭ͋Δ • Firefox͸೥຤ʹ͸WebExtensionͷΈʹͳΔ • manifest.jsonͱAPIඇޓ׵ͷ෦෼Λղܾ͢Δͨ ΊͷςΫχοΫΛ঺հ͠·ͨ͠
80. ͕࣌ؒ༨ͬͨΒ • Gyazo ExtensionͷΫϩεϒϥ΢βରԠࡁΈ֬ ೝσϞϯετϨʔγϣϯ • ͦͷଞ FAQ͋Ε͹