Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / intro...
Search
ryo
February 16, 2022
Technology
4
4.7k
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi
フロントエンドLT会 vol 6
ryo
February 16, 2022
Tweet
Share
More Decks by ryo
See All by ryo
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
5
1.8k
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
7
2k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
600
ts-morphのパフォーマンス改善Tips
kawamataryo
0
59
webpack to Rspack
kawamataryo
0
67
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
2k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
240
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
440
[Minecraft × ChatGPT] マイクラで作りたいものを伝えると魔法のように作ってくれるコマンドを作る
kawamataryo
0
2.4k
Other Decks in Technology
See All in Technology
社内お問い合わせBotの仕組みと学び
nish01
0
400
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
BirdCLEF+2025 Noir 5位解法紹介
myso
0
200
多野優介
tanoyusuke
1
450
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
220
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
350
Findy Team+のSOC2取得までの道のり
rvirus0817
0
350
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.5k
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
990
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
自動テストのコストと向き合ってみた
qa
0
170
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Agile that works and the tools we love
rasmusluckow
331
21k
Producing Creativity
orderedlist
PRO
347
40k
Gamification - CAS2011
davidbonilla
81
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Writing Fast Ruby
sferik
629
62k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
799
220k
Transcript
ӾཡཤྺɺϒοΫϚʔΫɺλϒΛ ԣஅతʹݕࡧͰ͖Δ Chrome֦ுΛ࡞ͬͨ @KawamataRyo 2022/02/16 ϑϩϯτΤϯυLTձ vol.6
ࣗݾհ 👨🚒
@KawamataRyo 🔥 ݩফ࢜ 👨💻 Engineer @LAPRAS inc ❤ TypeScript, Vue,
Firebase, Elixir 💪 झຯ ݒਨ
ࠓ͢͜ͱ 💬
• ࠷ۙ࡞ͬͨChrome֦ுͷհ • ࣮ͷϙΠϯτ • ։ൃͷ;Γ͔͑Γ
࡞ͬͨͷ
None
ɾ ӾཡཤྺɺλϒɺϒοΫϚʔΫΛΠϯΫϦϝϯλϧαʔν ɾ ๛ͳγϣʔτΧοτͰΩʔϘʔυͷΈͰతͷϖʔδΛ ։͚Δ ɾεϥογϡίϚϯυͰͷॊೈͳݕࡧՄೳ ػೳ
։ൃͷϞνϕʔγϣϯ🍺
ɾ TabΛ։͖͗ͯ͢໎ࢠʹͳΓ͕ͪ ɾ ChromeͷݕࡧόʔͷαδΣετ͕ඍົʹऑ͍ ɾ େͷϖʔδɺҰߦͬͨࣄ͕͋Δ ʢཤྺͰ୳ͤΔͣʣ
%&.0
Chrome web Store, Firefox Add-ons ͰΠϯετʔϧՄೳʂʂ
࣮ͷϙΠϯτ
Viteese Webext Ͱͷര։ൃ https://github.com/antfu/vitesse-webext
Viteese Webext Ͱͷര։ൃ ɾ Chrome։ൃڥͷςϯϓϨʔτϦϙδτϦ ɾ ViteʹΑΔߴͳHMR ɾ Vue3ɾTypeScriptͷշదͳ։ൃڥ ɾ
WebExtension ʹΑΔϚϧνϓϥοτϑΥʔϜϏϧυ
Fuse.jsͰͷFussy Searchͷ࣮ https://github.com/krisk/Fuse
Fuse.jsͰͷFussy Searchͷ࣮ ɾ Fussy SearchΛ؆୯ʹ࣮͢ΔͨΊͷϥΠϒϥϦ ɾ είΞϦϯάʹΑΔฒͼସ͑ ɾ ײతͳݕࡧΩʔʢۭจࣈͰˍݕࡧͳͲʣ ɾ
҆ఆɾߴͳಈ࡞
Windi CSSͰͷελΠϦϯά https://github.com/windicss/windicss
Windi CSSͰͷελΠϦϯά ɾ Tailwind CSS ϥΠΫͳUtilitiy- fi rst CSS framwork
ɾ ߴͳϏϧυ ɾ ॊೈͳࢦఆ ɾ μʔΫϞʔυͷରԠ
։ൃͷ;Γ͔͑Γ
։ൃஈ֊Ͱࠂͯ͠χʔζΛ֬ೝͰ͖ͨ͜ͱ Keep👍
ϓϩτλΠϓͷஈ֊ͰTwitterͰࠂ ։ൃελʔτ3Ͱࠂ 260͍͍Ͷɾ30RTͱ ҙతͳϦπΠʔτɾϦϓϥΠ ͕ଟ͔ͬͨͷͰɺधཁʹ֬৴Λ࣋ͬͯ ։ൃΛਐΊΒΕͨ
టष͘ใΛؤுͬͨ͜ͱ Keep👍
σϞಈըͷ࡞
Product Hunt ͷొ
Launchi Day 7 Ґ 143 Upvoted Product Hunt ͷొ
ଟͷخ͍͠ίϝϯτ.. Product Hunt ͷొ
Zenn ͷߘ
dev.to ͷߘ
ษڧձͰͷLTʢࠓʣ
GitHub ʹιʔεΛެ։ͨ͜͠ͱ Keep👍
։ൃॳظ͔ΒύϒϦοΫϦϙδτϦͱͯ͠ެ։
ػೳվળͷPRΛଟ͘Β͑ͨ ςΩετϋΠϥΠτػೳ ͷՃ Performanceվળ ࡉ͔͍όάमਖ਼
ॳΊͯ100 Star ⭐ Λ͑ͨ ࠓ·Ͱ200ϦϙδτϦ͘Β͍࡞ͬͯ100͑ͨͷॳʂ 145 ⭐
Problem 📛 க໋తͳόάΛͨ͠·· ॳճϦϦʔεΛͯ͠͠·ͬͨ
Chrome Web StoreɺChromeͷnewλϒϖʔδͰಈ͔ͳ͍… ݕࡧϞʔμϧΛContent ScriptͰ ϖʔδͷDOMʹΠϯδΣΫτͯ͠දࣔ ͍ͯͨͨ͠ΊɺContent Script͕ ಈ࡞͠ͳ͍ϖʔδͰىಈ͠ͳ͍. ※
ݱࡏɺPopupͰىಈ͢Δܗʹमਖ਼ͯ͠ճආ
·ͱΊ
• Chikamichi ࠷ߴศརͳͷͰͬͯͶ • Viteese Webext ࠷ڧ • ͬͯΒ͏ͨΊʹటष͍ใ͕େࣄ
• OSSਫ਼ਆଚ͍
͓ΘΓ
https://zenn.dev/ryo_kawamata/articles/4bf52f97165058 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢