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

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

ryo
February 16, 2022
Technology
4
3.7k

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

フロントエンドLT会 vol 6

ryo

February 16, 2022
Tweet

More Decks by ryo

See All by ryo
Resumable な JavaScript フレームワーク Qwik を学ぶ / qwik-resumable
kawamataryo
0
2.7k
JSからTSへ移行した Vue.jsプロダクトの型チェックを 漸進的に強化する/ reinforcing the type
kawamataryo
0
2.7k
Webで動画解析 〜Google Meetの挙手とリアルの挙手を連動させるChrome拡張作った話〜 / sync-raise-hand
kawamataryo
0
45
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
kawamataryo
2
210
Python の dotted path をコピーするVS Code 拡張を作ってみた / I made a copy python path.
kawamataryo
0
140
OSS活動ことはじめ / begin oss activities
kawamataryo
7
4.5k
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa
kawamataryo
2
1.9k
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
kawamataryo
7
3.7k
Firebase + Bolt で もくもく会用のSlack botを作った話 / Build slack bot with firebase + Bolt
kawamataryo
2
6k

Other Decks in Technology

See All in Technology
FlexScan HD2452Wの 後継を探して
tring
0
5.1k
cdk deployに必要な権限ってなんだ？
kinyok
0
140
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
120
Exploring MapStore Release 2022.02: improved 3DTiles support and more
simboss
PRO
0
200
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
0
160
AKIBA.SaaS資料
yasumuusan
0
160
オンプレk8sとEKSの並行運用の実際
ch1aki
0
160
ROS_Japan_UG_#49_LT
maeharakeisuke
0
200
Airdrop for Open Source Projects
epicsdao
0
350
グローバルチームことはじめ / Bootstrapping a global team
tasshi
1
650
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由　〜モリサワの SaaS 戦略〜
tomuro
0
110
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
240

Featured

See All Featured
Building Applications with DynamoDB
mza
85
4.9k
A better future with KSS
kneath
230
16k
The Cult of Friendly URLs
andyhume
68
5.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
A Tale of Four Properties
chriscoyier
149
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Rails Girls Zürich Keynote
gr2m
87
12k
Product Roadmaps are Hard
iamctodd
38
7.7k
Debugging Ruby Performance
tmm1
67
11k
Atom: Resistance is Futile
akmur
256
24k

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