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.6k
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi
フロントエンドLT会 vol 6
ryo
February 16, 2022
Tweet
Share
More Decks by ryo
See All by ryo
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
7
1.9k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
480
ts-morphのパフォーマンス改善Tips
kawamataryo
0
45
webpack to Rspack
kawamataryo
0
53
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
2k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
220
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
420
[Minecraft × ChatGPT] マイクラで作りたいものを伝えると魔法のように作ってくれるコマンドを作る
kawamataryo
0
2.3k
Resumable な JavaScript フレームワーク Qwik を学ぶ / qwik-resumable
kawamataryo
0
3.4k
Other Decks in Technology
See All in Technology
IIWレポートからみるID業界で話題のMCP
fujie
0
770
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
120
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
180
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
450
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
120
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A designer walks into a library…
pauljervisheath
206
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
It's Worth the Effort
3n
185
28k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢