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

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

0a16f7b8629f2facca2a1e80a73c5423?s=47 ryo
February 16, 2022
Technology
3
200

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

フロントエンドLT会 vol 6

0a16f7b8629f2facca2a1e80a73c5423?s=128

ryo

February 16, 2022
Tweet

More Decks by ryo

See All by ryo
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
2
120
Python の dotted path をコピーするVS Code 拡張を作ってみた / I made a copy python path.
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
0
81
OSS活動ことはじめ / begin oss activities
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
7
970
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
2
1.6k
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
7
3.4k
Firebase + Bolt で もくもく会用のSlack botを作った話 / Build slack bot with firebase + Bolt
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
2
5.3k
Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究 / ref vs reactive Vue Composition API Deep in
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
12
13k
僕とQiitaと、ときどきLT 〜アウトプット駆動でスキルを磨く〜
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
0
320
元◯◯◯が話す 命を救うアルゴリズム
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
0
190

Other Decks in Technology

See All in Technology
アーキテクチャを明文化して開発に臨んだ話
903c7dbf16067d22e7b03ead7d8acdc5?s=48 akkie76
0
360
Strategyパターン
65389cd2b6fdc531dcc4af999e864593?s=48 hankehly
0
160
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
658c29959d8a9fd352afa440a5813137?s=48 ritou
2
460
What's new in Vision
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
0
220
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます！〜
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
0
200
データ分析基盤のはじめかた
69a81d6d4d66a348e72f7a28b265fdbe?s=48 chanyou0311
0
130
スタートアップと技術選定と AWS
Bf5ee9059859ed5d855b5ff4680e63e2?s=48 track3jyo
PRO
2
350
Google Cloud Updates 2022/05/16-05/31
609308e6510e41133d30460eef1ccd36?s=48 no24oka
2
110
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
3adaa5e19f64345a0fbdb2e5d00be571?s=48 freee
0
310
SwiftUI Layout
0863933c047ef45d283fe4e1d26bbddc?s=48 auramagi
1
120
OCI Service Mesh 概要 / OCI Service Mesh ovewview
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
0
100
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.9k

Featured

See All Featured
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k
Adopting Sorbet at Scale
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
63
7.6k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
950
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.7k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.2k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.9k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k

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