Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi
ryo
February 16, 2022
Technology
4
3.7k
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi
フロントエンドLT会 vol 6
ryo
February 16, 2022
Tweet
Share
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
ӾཡཤྺɺϒοΫϚʔΫɺλϒΛ ԣஅతʹݕࡧͰ͖Δ 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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢