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
1
130
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
7
1.9k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
550
ts-morphのパフォーマンス改善Tips
kawamataryo
0
54
webpack to Rspack
kawamataryo
0
61
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
2k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
230
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
430
[Minecraft × ChatGPT] マイクラで作りたいものを伝えると魔法のように作ってくれるコマンドを作る
kawamataryo
0
2.3k
Other Decks in Technology
See All in Technology
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
2
200
制約理論(ToC)入門
recruitengineers
PRO
2
250
.NET開発者のためのAzureの概要
tomokusaba
0
230
認知戦の理解と、市民としての対抗策
hogehuga
0
310
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.2k
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
5
660
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
300
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
570
人を動かすことについて考える
ichimichi
2
320
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
ECS モニタリング手法大整理
yendoooo
1
120
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
140
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Building Applications with DynamoDB
mza
96
6.6k
Being A Developer After 40
akosma
90
590k
Code Review Best Practice
trishagee
70
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢