$30 off During Our Annual Pro Sale. View Details »

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

pastak
August 04, 2017

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

pastak

August 04, 2017
Tweet

More Decks by pastak

Other Decks in Technology

Transcript

  1. ϒϥ΢β֦ுͷΫϩε
    ϒϥ΢βରԠʹ͍ͭͯ
    Ͳ͏޲͖߹͍ͬͯΔ͔
    Pasta-K
    builderscon tokyo 2017
    [email protected] /[email protected]

    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