emacs helm likeな WebExtensions を作った話

tech talk about https://github.com/kumabook/bebop/

Transcript

1. EMACS HELM LIKEͳ WEBEXTENSIONS Λ࡞ͬͨ࿩@KUMABOOK WE’RE JAVASCRIPTERS@16TH
2. ▸ Hiroki Kumamoto ▸ github, twitter @kumabook ▸ Software engineer @ Spincoaster, Inc ▸ JavaScript, Swift, Ruby (rails), rust ࣗݾ঺հ
3. TEXT ࠓ೔࿩͢͜ͱ ▸ WebExtensionsͱ͸ ▸ ࣗ࡞WebExtensions: bebopͷ঺հ ▸ WebExtensionsͷϕετϓϥΫςΟε
4. TEXT WebExtensionsͱ͸ ▸ ϒϥ΢βͷػೳΛ֦ு͢Δ΋ͷ ▸ HTML+JavaScript+CSSͰ։ൃͰ͖Δ ▸ Ϋϩεϒϥ΢β ▸ extension API ͕ඪ४࢓༷ ▸ ϒϥ΢βؒͷࠩҟ͸݁ߏ͋Δ
5. TEXT WebExtensionsͰͰ͖Δ͜ͱ ▸ WebϖʔδͷίϯςϯπΛมߋ ▸ AdBlock ▸ πʔϧόʔʹϝχϡʔɾ΢ΟδΣοτΛ௥Ճ ▸ QR Code Image Generator
6. TEXT ࠓճ࡞ͬͨ΋ͷ ▸ Emacs helm on WebExtensions ▸ incremental completion and selection narrowing framework ▸ Spotlightͱ͔pecoͱ͔ ▸ github.com/kumabook/bebop ▸ firefox bebop, chrome bebopͱ͔Ͱݕࡧ
7. TEXT ࠓճ࡞ͬͨ΋ͷ ▸ ΫΤϦͰީิΛߜΓࠐΜͰɺΞΫγϣϯΛ࣮ߦ ▸ ཤྺͷݕࡧɾ࡟আ ▸ ϒοΫϚʔΫͷݕࡧɾ࡟আ ▸ λϒͷҰׅ࡟আ ▸ Ϛ΢εͳ͠Ͱ৭ʑͰ͖Δ
8. TEXT ࠓճ࡞ͬͨ΋ͷ ▸ Alternative to Vimperator ▸ mouseless browsing͕Ͱ͖ͨਆΞυΦϯ ▸ چΞυΦϯ͸Firefox Quantum͔Β͓੦͖ʹ ▸ vimperator೉ຽ͕ଓग़ ▸ Related works: vim-vixen, tridactyl, Surfingkeys ▸ γϯϓϧʹཉ͍͠ػೳ͚ͩΛ੾Γग़ͨ͠
9. TEXT WebExtensionsͷΞʔΩςΫνϟ
10. TEXT ΞʔΩςΫνϟ background script popup content script options ui ϝοηʔδύογϯά
11. TEXT ΞʔΩςΫνϟ ▸ ίϯϙʔωϯτʹΑͬͯͰ͖Δ͜ͱ͕ҧ͏ͷͰɺผίϯϙʔωϯ τʹॲཧΛҕৡ͢Δඞཁ͕͋Δ ▸ ίϯϙʔωϯτؒͷ΍ΓऔΓ ▸ ֤ίϯϙʔωϯτ͸ಠཱ࣮ͯ͠ߦɾ໊લۭؒ΋ผ ▸ ֤ίϯϙʔωϯτؒͷ΍ΓऔΓ͸ϝοηʔδύογϯά ▸ Portͱݺ͹Ε͍ͯΔ ▸ ඇಉظʹportʹϝοηʔδΛ౤͛߹͍ͳ͕Βॲཧ͕ਐΉ
12. TEXT ϕετϓϥΫςΟε ▸ WebExtensions։ൃͷ೉͠͞ ▸ ίʔϧόοΫhell ▸ ঢ়ଶ؅ཧͷ೉͠͞ ▸ react, redux, redux-saga͕૬ੑΑ͔ͬͨ
13. TEXT react ▸ طଘͷίϯϙʔωϯτΛ࠶ར༻Ͱ͖Δ ▸ ϩʔΧϧ͔ΒεΫϦϓτΛಡΈࠐΉͷͰαΠζ͕Ͱ͔͍͜ͱ ͸ؾʹͳΒͳ͍
14. TEXT redux ▸ popup ͱoptions uiͰreduxΛ࢓༷ ▸ background script ͱcontent_script͸stateless apiΛఏڙ ▸ options uiͱpopupؒ͸storage apiͰঢ়ଶΛڞ༗ ▸ options uiͱpopup͸ഉଞత ▸ ด͡Δͱ͖ʹstateΛอଘͯ͠ɺ্ཱͪ͛Δͱ͖ʹϩʔυ͢Δ ▸ reduxͷinitial stateʹ͢Δ ▸ Storage api͸ڞ༗ͷඇಉظͳlocalStorage
15. TEXT Redux background script popup content script options ui STATELESSͳAPI STORAGE APIͰ STATE ڞ༗ REDUX REDUX
16. TEXT redux-saga ▸ redux-sagaͷchannelΛ࢖͏ ▸ ֎෦ͷΠϕϯτΛந৅Խͨ͠΋ͷ ▸ background scriptͷportͷϝοηʔδύογϯάΛϥοϓ ▸ ϝοηʔδͷܗࣜΛreduxͷactionͱಉ͡ܗࣜʹ͢Δ ▸ { type: String, payload: Any } ▸ ࣗಈతʹmessage͔Βactionʹม׵ ▸ ಁաతʹbackground script͔ΒΞΫγϣϯΛdispatchͰ͖Δ
17. TEXT Redux background script popup REDUX-SAGA CHANNEL MESSAGE ACTION
18. TEXT ·ͱΊ ▸ WebExtensionsͷ։ൃʹ͍ͭͯͷ֓ཁ ▸ ࣗ࡞WebExtensions bebopͷ঺հ ▸ ྑ͔ͬͨΒελʔΛ΋Β͑Δͱتͼ·͢ ▸ WebExtensions։ൃͰ΋ීஈͷWeb։ൃͷϑϨʔϜϫʔΫ ͸࢖͑Δ ▸ react, redux, redux-saga