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

by pastak

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@pastakɹ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

SW-3377-1978-8675

Slide 5

Slide 5 text

gyazo.com

Slide 6

Slide 6 text

scrapbook.io

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

དྷिͷ༵ۚɺձࣾͷ༷ࢠ͕ςϨ Ϗʹग़ΔͷͰݟ͍ͯͩ͘͞

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

์ૹΤϦΞ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ϫϯηά࣋ͬͯ ژ౎ʹߦ͜͏

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

https://addons.mozilla.org/ja/ﬁrefox/addon/gyazo-ofﬁcial/

Slide 17

Slide 17 text

and

Slide 18

Slide 18 text

Gyazo Extension for Edge is coming soon!!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

࿩͞ͳ͍͜ͱ • 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-ﬁrefoxniinsutorusuru-webextensionyi-zhi- wu-yu

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ϒϥ΢β֦ுݱঢ়֬ೝ 2017 Summer

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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-ﬁrefox-57-compatibility-milestones/

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ϒϥ΢β֦ு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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

օ͞Μͷ ৺ͷ੠

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

͸͍

Slide 38

Slide 38 text

ਖ਼ղ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

manifest.jsonͱ޲͖߹͏

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

https://github.com/pastak/chrome-browser-object-polyﬁll https://www.npmjs.com/package/chrome-browser-object-polyﬁll

Slide 58

Slide 58 text

pollyﬁllॻ͍ͨ • chrome / browserͲͪΒ͔ΒͰ΋APIΛݺͼग़ ͤΔΑ͏ʹ͢Δ • ଟ෼ࠓޙ͸browserΛ࢖͏͜ͱʹͳΔͩΖ͏͔ ΒͦͬͪͰॻ͍͓ͯ͘ͱྑͦ͞͏

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

͜͜·Ͱͷ·ͱΊ • wemfͰmanifest.jsonͷࠩ෼Λٵऩ • polyﬁllͰchrome/browserͷࠩ෼Λٵऩ • then-chromeͰPromiseԽ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

ະ࣮૷ͷAPIͱ޲͖߹͏

Slide 68

Slide 68 text

جຊ࡞ઓ

Slide 69

Slide 69 text

࣮૷Λ଴ͭ

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

ؾ߹͍Ͱ΍͍͔ͬͯ͘͠ͳ͍ • ͸͍ɾɾɾ • try{}catch(e){}Ͱࣺͯͯ͠·͏… • ະདྷͷΞοϓσʔτʹظ଴

Slide 77

Slide 77 text

try-catchͰ΍͍ͬͯ͘ྫ

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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