閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi

フロントエンドLT会 vol 6

Transcript

1. ӾཡཤྺɺϒοΫϚʔΫɺλϒΛ ԣஅతʹݕࡧͰ͖Δ Chrome֦ுΛ࡞ͬͨ࿩ @KawamataRyo 2022/02/16 ϑϩϯτΤϯυLTձ vol.6
2. ࣗݾ঺հ 👨🚒
3. @KawamataRyo 🔥 ݩফ๷࢜ 👨💻 Engineer @LAPRAS inc ❤ TypeScript, Vue, Firebase, Elixir 💪 झຯ ݒਨ
4. ࠓ೔࿩͢͜ͱ 💬
5. • ࠷ۙ࡞ͬͨChrome֦ுͷ঺հ • ࣮૷ͷϙΠϯτ • ։ൃͷ;Γ͔͑Γ
6. ࡞ͬͨ΋ͷ
8. ɾ ӾཡཤྺɺλϒɺϒοΫϚʔΫΛΠϯΫϦϝϯλϧαʔν 
 ɾ ๛෋ͳγϣʔτΧοτͰΩʔϘʔυͷΈͰ໨తͷϖʔδΛ ։͚Δ ɾεϥογϡίϚϯυͰͷॊೈͳݕࡧ΋Մೳ ػೳ
9. ։ൃͷϞνϕʔγϣϯ🍺
10. ɾ TabΛ։͖͗ͯ͢໎ࢠʹͳΓ͕ͪ 
 ɾ ChromeͷݕࡧόʔͷαδΣετ͕ඍົʹऑ͍ ɾ େ఍ͷϖʔδ͸ɺҰ౓ߦͬͨࣄ͕͋Δ 
 ʢཤྺͰ୳ͤΔ͸ͣʣ
11. %&.0
12. Chrome web Store, Firefox Add-ons 
 ͰΠϯετʔϧՄೳʂʂ
13. ࣮૷ͷϙΠϯτ
14. Viteese Webext Ͱͷര଎։ൃ https://github.com/antfu/vitesse-webext
15. Viteese Webext Ͱͷര଎։ൃ ɾ Chrome։ൃ؀ڥͷςϯϓϨʔτϦϙδτϦ ɾ ViteʹΑΔߴ଎ͳHMR ɾ Vue3ɾTypeScriptͷշదͳ։ൃ؀ڥ ɾ WebExtension ʹΑΔϚϧνϓϥοτϑΥʔϜϏϧυ
16. Fuse.jsͰͷFussy Searchͷ࣮૷ https://github.com/krisk/Fuse
17. Fuse.jsͰͷFussy Searchͷ࣮૷ ɾ Fussy SearchΛ؆୯ʹ࣮૷͢ΔͨΊͷϥΠϒϥϦ ɾ είΞϦϯάʹΑΔฒͼସ͑ ɾ ௚ײతͳݕࡧΩʔʢۭจࣈͰˍݕࡧͳͲʣ ɾ ҆ఆɾߴ଎ͳಈ࡞
18. Windi CSSͰͷελΠϦϯά https://github.com/windicss/windicss
19. Windi CSSͰͷελΠϦϯά ɾ Tailwind CSS ϥΠΫͳUtilitiy- fi rst CSS framwork ɾ ߴ଎ͳϏϧυ ɾ ॊೈͳࢦఆ ɾ μʔΫϞʔυͷରԠ
20. ։ൃͷ;Γ͔͑Γ
21. ։ൃஈ֊Ͱࠂ஌ͯ͠χʔζΛ֬ೝͰ͖ͨ͜ͱ Keep👍
22. ϓϩτλΠϓͷஈ֊ͰTwitterͰࠂ஌ ։ൃελʔτ3೔໨Ͱࠂ஌ 260͍͍Ͷɾ30RTͱ ޷ҙతͳϦπΠʔτɾϦϓϥΠ ͕ଟ͔ͬͨͷͰɺधཁʹ֬৴Λ࣋ͬͯ ։ൃΛਐΊΒΕͨ
23. టष͘޿ใΛؤுͬͨ͜ͱ Keep👍
24. σϞಈըͷ࡞੒
25. Product Hunt ΁ͷొ࿥
26. Launchi Day 7 Ґ 143 Upvoted Product Hunt ΁ͷొ࿥
27. ଟ਺ͷخ͍͠ίϝϯτ΋.. Product Hunt ΁ͷొ࿥
28. Zenn ΁ͷ౤ߘ
29. dev.to ΁ͷ౤ߘ
30. ษڧձͰͷLTʢࠓ೔ʣ
31. GitHub ʹιʔεΛެ։ͨ͜͠ͱ Keep👍
32. ։ൃॳظ͔ΒύϒϦοΫϦϙδτϦͱͯ͠ެ։
33. ػೳվળͷPRΛଟ͘΋Β͑ͨ ςΩετϋΠϥΠτػೳ ͷ௥Ճ Performanceվળ ࡉ͔͍όάमਖ਼
34. ॳΊͯ100 Star ⭐ Λ௒͑ͨ ࠓ·Ͱ200ϦϙδτϦ͘Β͍࡞ͬͯ100௒͑ͨͷ͸ॳʂ 145 ⭐
35. Problem 📛 க໋తͳόάΛ࢒ͨ͠·· ॳճϦϦʔεΛͯ͠͠·ͬͨ
36. Chrome Web StoreɺChromeͷnewλϒϖʔδͰಈ͔ͳ͍… ݕࡧϞʔμϧΛContent ScriptͰ ϖʔδͷDOMʹΠϯδΣΫτͯ͠දࣔ ͍ͯͨͨ͠ΊɺContent Script͕ ಈ࡞͠ͳ͍ϖʔδͰىಈ͠ͳ͍. ※ ݱࡏ͸ɺPopupͰىಈ͢Δܗʹमਖ਼ͯ͠ճආ
37. ·ͱΊ
38. • Chikamichi ࠷ߴศརͳͷͰ࢖ͬͯͶ • Viteese Webext ࠷ڧ • ࢖ͬͯ΋Β͏ͨΊʹ͸టष͍޿ใ͕େࣄ 
 • OSSਫ਼ਆଚ͍
39. ͓ΘΓ
40. https://zenn.dev/ryo_kawamata/articles/4bf52f97165058 ※εϥΠυͷ಺༰ɾίʔυ͸ҎԼهࣄʹ΋·ͱΊͯ·͢