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

Transcript

1. Chrome ExtensionΛ FirefoxʹΠϯετʔϧ͢Δ Pasta-K pastak@kmc.gr.jp
2. ͜Μʹͪ͸
3. Πϯλʔωοτ׆ಈ twitter.com/pastak id: Pasta-K pastak.hatenablog.com pastak-diary.hatenadiary.com github.com/pastak
6. ࠷ॳʹͪ͜ΒΛ
   ޚཡ͍ͩ͘͞ ※͜͜ͰFirefox BetaΛ্ཱͪ͛ͯσϞΛ͢Δ
8. (ZB[P
   "EEPO
   GPS
   'JSFGPY
   $PNJOH
   4PPO
9. (ZB[P
   "EEPO
   GPS
   'JSFGPY
   IUUQTBEEPOTNP[JMMBPSH BEEPOHZB[PPGpDJBM ※Firefox 47.0a1Ҏ্ରԠ
10. 8FC&YUFOTJPO
11. 'JSFGPYʹ
    ΠϯετʔϧՄೳ ʹͳͬͨ৽ͨͳ
    ΞυΦϯͷܗࣜ
12. $ISPNF
    &YUFOTJPOͱ
    ΄΅ޓ׵ੑ͕͋Δ
13. $ISPNF
    &YUFOTJPOͷ
    ࢿ࢈Λͦͷ··׆༻ͯ͠
    ϢʔβʔΛ޿͛ΒΕΔ
14. Firefoxͷϒϥ΢β֦ுܗࣜ • XUL + XPCOMΛ༻͍ͨ։ൃ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm) • ChromeExtensionޓ׵ͷίʔυܗࣜ • Web Extensionʂ
15. ࠷৽ͷݱঢ় • 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
16. ࠷৽ͷݱঢ় • https://blog.mozilla.org/addons/2016/04/29/ webextensions-in-firefox-48/ • Optionϖʔδαϙʔτ׬ྃ • chrome.*APIΛݺ΂ͳ͍όά͕͋Δʁ • Firefox 48 AndroidͰ΋αϙʔτ༧ఆ • ։ൃதΞυΦϯͷreload • https://github.com/mozilla/web-ext • https://github.com/mdn/webextensions- examples
17. ٢ใ
18. .P[JMMB.4 0QFSBͷऀ͕
    ֦ுػೳͷίΞ"1* ͷඪ४ԽΛఏҊ
19. • ʰ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
20. NBOJGFTUKTPO ඇޓ׵໰୊
21. manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ
22. manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ
23. manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ Chromeʹ ΠϯετʔϧෆՄ
24. ݱঢ়྆ํͰಈ͘
    NBOJGFTUKTPO
    ͸࡞Εͳ͍
26. NBOJGFTUKTPO
    ͳΜͱ͔ͯ͘͠ΕΔ܅ ࡞ͬͨ
27. 8FC&YUFOTJPO
    .BOJGFTU
    'PSNBUUFS
28. https://github.com/pastak/wemf
29. What’s wemf • ඞؚͣ·Ε͍ͯΔ΂͖ΩʔͱରԠ͢Δ஋Λ௥Ճ • ෆ଍͍ͯ͠ΔΩʔ͕͋Δ৔߹͸ package.json ͳͲ͔Βੜ੒ͭ͠ ͭɺର࿩ΠϯλʔϑΣΠεͰੜ੒͠·͢ • ະରԠͷΩʔΛ࡟আ • ݱঢ়ະରԠͷΩʔ͕͋ΔͱΠϯετʔϧʹࣦഊ͢ΔͷͰɺͦͷ Α͏ͳΩʔΛ࡟আ͠·͢ɻ • ະରԠͷΩʔϫʔυͷ࢖༻Λ௨஌ • web_accessible_resourcesͰϫΠϧυΧʔυ͕࢖͑ͳ͍ͳͲ͕ ͋ΔͷͰɺͦͷΑ͏ͳΩʔϫʔυΛؚΜͰ͍Δ৔߹͸࡟আͤͣ ʹ௨஌͠·͢ɻ
31. ຊ౰ʹ$ISPNF
    &YUFOTJPO
    ͕ͦͷ··
    ಈ͘ͷʁʁʁ
32. ײ֮తʹ͸ׂ
    ͘Β͍ͷ
    &YUFOTJPO͸
    γϡοͱҠ২Մೳ
33. ײ֮తʹ͸ׂ
    ͘Β͍ͷ
    &YUFOTJPO͸
    γϡοͱҠ২Մೳ $ISPNF
    4UPSFͰ
    ެ։͞Ε͍ͯΔ΋ͷͷ͏ͪ
    ͦͷ··'JSFGPY
    %FTLUPQͰ
    ಈ͘΋ͷ͸
    
    
    
    IUUQXXXBSFXFXFCFYUFOTJPOTZFUDPN DISPNF
    
34. Ҡ২ͷ๦͛ʹ
    ͳΓͦ͏ͳࣄ
35. Ҡ২ͷ࣌ʹ֬ೝ͍ͨ͜͠ͱ • JS / CSS / HTML ͷͦΕͧΕ࣮૷ରԠঢ়گ • -webkit-*࢖ͬͯͳ͍ʁ • JSͷAPI΍CSSͷৼΔ෣͍͸ຊ౰ʹಉ͡ʁ • http://caniuse.com/ • chrome.*API ͷରԠঢ়گ • http://www.arewewebextensionsyet.com/ • APIͷҰཡ / ؔ࿈ bugzilla΁ͷࢀর / filterͱ͔͕͋ͬͯศར • https://developer.mozilla.org/en-US/Add-ons/ WebExtensions/Chrome_incompatibilities
36. ಛʹؾΛ͚͍ͭͨະ࣮૷API • chrome.notifications.update • chrome.runtime.onStartup • chrome.runtime.onInstalled • chrome.storage.sync • chrome.tabs.sendRequest • chrome.tabs.getSelected • chrome.tabs.* ͷdeprecatedͱ͞Ε͍ͯΔAPI
37. ࣮ࡍʹ
    ΍ͬͯΈͨ
38. HJUIVCDPNIBUFOB IBUFOBCPPLNBSL HPPHMFDISPNF FYUFOTJPO
39. ੒Ռ෺
40. HJUIVCDPNQBTUBL IBUFOBCPPLNBSL HPPHMFDISPNF FYUFOTJPOQVMM ※͜͜ͰFirefox BetaʹΠϯετʔϧ͢Δͱ͜Ζ͔ΒσϞ
41. ࡞ۀEJGG
43. • 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
44. • 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 • ۭߦɾߦ຤εϖʔε੔ܗͳͲ +17 -24 ࣮࣭: +46 -17
45. ΍ͬͨ͜ͱ
46. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • chrome.tabs.getSelected • Chrome33͔ΒdeprecatedʹͳͬͯΔ • ·ͩChromeͰ͸ҰԠಈ࡞͢ΔAPI • chrome.tabs.queryͰॻ͖׵͑Δ
47. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • chrome.runtime.onInstalled • Web Extensionʹະ࣮૷ͳAPI • https://bugzilla.mozilla.org/show_bug.cgi? id=1252871 • ͱΓ͋͑ͣ try {…} catch (e) {…} Ͱғ͓ͬͯ͘ • αϙʔτࡁʹͳΔͱಈ࡞͢ΔΑ͏ʹͳΔ
48. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • Web SQL෦෼Λద౰ʹϞοΫͯ͠͝·͔͢ • ϒοΫϚʔΫͷݕࡧͳͲʹWeb SQLΛ࢖ͬͯ ͍ͨͷͰͦͷ෦෼Λଞͷద౰ͳAPIͳͲͰॻ͖ ׵͑Δͷ͸ϋʔυͳͷͰɺͱΓ͋͑ͣϞοΫ͠ ͯಈ͘Α͏ʹ࣋ͪࠐΉ
49. ͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • CSSΛ΄Μͷͪΐͬͱඍௐ੔
50. Ҡ২׬ྃ
51. ग़དྷͳ͍͜ͱ
52. • Πϯετʔϧ࣌ʹར༻ن໿ΛදࣔͰ͖ͳ͍ • ݕࡧʹWebSQLΛར༻͍ͯ͠ΔͷͰɺҠ২ෆՄೳ • ΠϯετʔϧޙʹϩάΠϯ͢ΔͱϢʔβʔ৘ใͷɹ ࠶औಘ͕૸Βͳ͍ • ϙοϓΞοϓͷදࣔαΠζ͕ෆ҆ఆ • ઃఆը໘දࣔෆՄ • XUL൛ͷΑ͏ʹπʔϧόʔͳͲͷࡉ΍͔ͳػೳ௥Ճ ͸ෆՄೳ
53. ·ͱΊ
54. ·ͱΊ • ࠓ·ͰChrome Extension͸OperaʹՃ͑ͯɺFirefoxͷϢʔβʔʹ ΋΄΅ಉ͡ίʔυͰExtensionΛఏڙग़དྷΔΑ͏ʹͳͬͨ • MS΋ఏҊʹ৐͍ͬͯΔͷͰɺকདྷతʹ͸MS Edge΋஥ؒೖΓ͠ ͦ͏ʁ • Safari͸Ͳ͏ͳΔʁʁ • ֤ϕϯμʔͷಠ֦ࣗு΋ೝΊΒΕ͍ͯΔͷͰɺͲ͜·ͰฏԺͳ؀ڥ ʹͳΔ͔͸ࠓޙ࣍ୈ • ͢ͰʹOpera͸sidebarΛ࣮૷͍ͯ͠Δ • Mozilla΋Ϣʔβʔͷଟ͍ز͔ͭͷAddon͕ҠߦͰ͖ΔΑ͏ʹAPI Λ௥Ճͯ͠੔͑Δ४උΛ͍ͯ͠Δ