Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

0a16f7b8629f2facca2a1e80a73c5423?s=47 ryo
February 16, 2022

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

フロントエンドLT会 vol 6

0a16f7b8629f2facca2a1e80a73c5423?s=128

ryo

February 16, 2022
Tweet

More Decks by ryo

Other Decks in Technology

Transcript

  1. ӾཡཤྺɺϒοΫϚʔΫɺλϒΛ ԣஅతʹݕࡧͰ͖Δ Chrome֦ுΛ࡞ͬͨ࿩ @KawamataRyo 2022/02/16 ϑϩϯτΤϯυLTձ vol.6

  2. ࣗݾ঺հ 👨🚒

  3. @KawamataRyo 🔥 ݩফ๷࢜ 👨💻 Engineer @LAPRAS inc ❤ TypeScript, Vue,

    Firebase, Elixir 💪 झຯ ݒਨ
  4. ࠓ೔࿩͢͜ͱ 💬

  5. • ࠷ۙ࡞ͬͨChrome֦ுͷ঺հ • ࣮૷ͷϙΠϯτ • ։ൃͷ;Γ͔͑Γ

  6. ࡞ͬͨ΋ͷ

  7. None
  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 ※εϥΠυͷ಺༰ɾίʔυ͸ҎԼهࣄʹ΋·ͱΊͯ·͢