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

Transcript

1. Chrome ExtensionΛ
   FirefoxʹΠϯετʔϧ͢Δ
   Pasta-K
   pastak@kmc.gr.jp
   

   View Slide

2. ͜Μʹͪ͸
   

   View Slide

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

   View Slide

4. View Slide

5. View Slide

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

   View Slide

7. View Slide

8. (ZB[P"EEPO
   GPS'JSFGPY
   $PNJOH4PPO
   

   View Slide

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

   View Slide

10. 8FC&YUFOTJPO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

17. ٢ใ
    

    View Slide

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

    View Slide

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
    

    View Slide

20. NBOJGFTUKTPO
    ඇޓ׵໰୊
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. ݱঢ়྆ํͰಈ͘
    NBOJGFTUKTPO
    ͸࡞Εͳ͍
    

    View Slide

25. View Slide

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

    View Slide

27. 8FC&YUFOTJPO
    .BOJGFTU
    'PSNBUUFS
    

    View Slide

28. https://github.com/pastak/wemf
    

    View Slide

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

    View Slide

30. View Slide

31. ຊ౰ʹ$ISPNF
    &YUFOTJPO
    ͕ͦͷ··
    ಈ͘ͷʁʁʁ
    

    View Slide

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

    View Slide

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

    View Slide

34. Ҡ২ͷ๦͛ʹ
    ͳΓͦ͏ͳࣄ
    

    View Slide

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
    

    View Slide

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

    View Slide

37. ࣮ࡍʹ
    ΍ͬͯΈͨ
    

    View Slide

38. HJUIVCDPNIBUFOB
    IBUFOBCPPLNBSL
    HPPHMFDISPNF
    FYUFOTJPO
    

    View Slide

39. ੒Ռ෺
    

    View Slide

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

    View Slide

41. ࡞ۀEJGG
    

    View Slide

42. View Slide

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
    

    View Slide

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
    

    View Slide

45. ΍ͬͨ͜ͱ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. Ҡ২׬ྃ
    

    View Slide

51. ग़དྷͳ͍͜ͱ
    

    View Slide

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

    View Slide

53. ·ͱΊ
    

    View Slide

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

    View Slide