Chrome Extensionを Firefoxにインストールする - WebExtension移植物語

by pastak

Slide 1

Slide 1 text

Chrome ExtensionΛ FirefoxʹΠϯετʔϧ͢Δ Pasta-K [email protected]

Slide 2

Slide 2 text

͜Μʹͪ͸

Slide 3

Slide 3 text

Πϯλʔωοτ׆ಈ twitter.com/pastak id: Pasta-K pastak.hatenablog.com pastak-diary.hatenadiary.com github.com/pastak

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

࠷ॳʹͪ͜ΒΛ ޚཡ͍ͩ͘͞ ※͜͜ͰFirefox BetaΛ্ཱͪ͛ͯσϞΛ͢Δ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

(ZB[P"EEPO GPS'JSFGPY $PNJOH4PPO

Slide 9

Slide 9 text

(ZB[P"EEPO GPS'JSFGPY IUUQTBEEPOTNP[JMMBPSH BEEPOHZB[PPGpDJBM ※Firefox 47.0a1Ҏ্ରԠ

Slide 10

Slide 10 text

8FC&YUFOTJPO

Slide 11

Slide 11 text

'JSFGPYʹ ΠϯετʔϧՄೳ ʹͳͬͨ৽ͨͳ ΞυΦϯͷܗࣜ

Slide 12

Slide 12 text

$ISPNF &YUFOTJPOͱ ΄΅ޓ׵ੑ͕͋Δ

Slide 13

Slide 13 text

$ISPNF&YUFOTJPOͷ ࢿ࢈Λͦͷ··׆༻ͯ͠ ϢʔβʔΛ޿͛ΒΕΔ

Slide 14

Slide 14 text

Firefoxͷϒϥ΢β֦ுܗࣜ • XUL + XPCOMΛ༻͍ͨ։ൃ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm) • ChromeExtensionޓ׵ͷίʔυܗࣜ • Web Extensionʂ

Slide 15

Slide 15 text

࠷৽ͷݱঢ় • Firefox v46 (ݱࡏͷStable) Ͱalphaʹͳͬͨ • 2016-08-02ʹstableೖΓ͢Δ༧ఆͷFirefox v48Ͱstable ʹͳΔ໨ඪ • chrome -> browser • addon.mozilla.org ʹΞοϓϩʔυ͢Δ͜ͱͰॺ໊Մೳʹ • ΞοϓϩʔυΛ΍ͬͯ͘ΕΔίϚϯυϥΠϯπʔϧ web-ext ΋͋Δ • ະ࣮૷ͷAPI΋͔ͳΓݮ͖ͬͯͨ • https://developer.mozilla.org/en-US/Add-ons/ WebExtensions/Chrome_incompatibilities

Slide 16

Slide 16 text

࠷৽ͷݱঢ় • https://blog.mozilla.org/addons/2016/04/29/ webextensions-in-ﬁrefox-48/ • Optionϖʔδαϙʔτ׬ྃ • chrome.*APIΛݺ΂ͳ͍όά͕͋Δʁ • Firefox 48 AndroidͰ΋αϙʔτ༧ఆ • ։ൃதΞυΦϯͷreload • https://github.com/mozilla/web-ext • https://github.com/mdn/webextensions- examples

Slide 17

Slide 17 text

٢ใ

Slide 18

Slide 18 text

.P[JMMB.4 0QFSBͷऀ͕ ֦ுػೳͷίΞ"1* ͷඪ४ԽΛఏҊ

Slide 19

Slide 19 text

• ʰW3CͷBrowser Extension Community GroupͷϝʔϦϯάϦετʹ͓͍ͯɺϒϥ΢ βͷ֦ுػೳʹ͓͚ΔίΞAPI΍ϚχϑΣε τɺύοέʔδΛඪ४Խ͢Δ͜ͱΛڞಉͰఏ Ҋͨ͠ɻʱ • http://rockridge.hatenablog.com/entry/ 2016/05/05/110059 • https://dev.opera.com/blog/better- extensions-ecosystem/ • https://github.com/browserext/browserext • https://twitter.com/browserext

Slide 20

Slide 20 text

NBOJGFTUKTPO ඇޓ׵໰୊

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ݱঢ়྆ํͰಈ͘ NBOJGFTUKTPO ͸࡞Εͳ͍

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

8FC&YUFOTJPO .BOJGFTU 'PSNBUUFS

Slide 28

Slide 28 text

https://github.com/pastak/wemf

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

ຊ౰ʹ$ISPNF &YUFOTJPO ͕ͦͷ·· ಈ͘ͷʁʁʁ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Ҡ২ͷ๦͛ʹ ͳΓͦ͏ͳࣄ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ಛʹؾΛ͚͍ͭͨະ࣮૷API • chrome.notiﬁcations.update • chrome.runtime.onStartup • chrome.runtime.onInstalled • chrome.storage.sync • chrome.tabs.sendRequest • chrome.tabs.getSelected • chrome.tabs.* ͷdeprecatedͱ͞Ε͍ͯΔAPI

Slide 37

Slide 37 text

࣮ࡍʹ ΍ͬͯΈͨ

Slide 38

Slide 38 text

HJUIVCDPNIBUFOB IBUFOBCPPLNBSL HPPHMFDISPNF FYUFOTJPO

Slide 39

Slide 39 text

੒Ռ෺

Slide 40

Slide 40 text

HJUIVCDPNQBTUBL IBUFOBCPPLNBSL HPPHMFDISPNF FYUFOTJPOQVMM ※͜͜ͰFirefox BetaʹΠϯετʔϧ͢Δͱ͜Ζ͔ΒσϞ

Slide 41

Slide 41 text

࡞ۀEJGG

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

• 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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

΍ͬͨ͜ͱ

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Ҡ২׬ྃ

Slide 51

Slide 51 text

ग़དྷͳ͍͜ͱ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

·ͱΊ

Slide 54

Slide 54 text

·ͱΊ • ࠓ·ͰChrome Extension͸OperaʹՃ͑ͯɺFirefoxͷϢʔβʔʹ ΋΄΅ಉ͡ίʔυͰExtensionΛఏڙग़དྷΔΑ͏ʹͳͬͨ • MS΋ఏҊʹ৐͍ͬͯΔͷͰɺকདྷతʹ͸MS Edge΋஥ؒೖΓ͠ ͦ͏ʁ • Safari͸Ͳ͏ͳΔʁʁ • ֤ϕϯμʔͷಠ֦ࣗு΋ೝΊΒΕ͍ͯΔͷͰɺͲ͜·ͰฏԺͳ؀ڥ ʹͳΔ͔͸ࠓޙ࣍ୈ • ͢ͰʹOpera͸sidebarΛ࣮૷͍ͯ͠Δ • Mozilla΋Ϣʔβʔͷଟ͍ز͔ͭͷAddon͕ҠߦͰ͖ΔΑ͏ʹAPI Λ௥Ճͯ͠੔͑Δ४උΛ͍ͯ͠Δ