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
3
200
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi
フロントエンドLT会 vol 6
ryo
February 16, 2022
Tweet
Share
More Decks by ryo
See All by ryo
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
kawamataryo
2
120
Python の dotted path をコピーするVS Code 拡張を作ってみた / I made a copy python path.
kawamataryo
0
81
OSS活動ことはじめ / begin oss activities
kawamataryo
7
970
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa
kawamataryo
2
1.6k
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
kawamataryo
7
3.4k
Firebase + Bolt で もくもく会用のSlack botを作った話 / Build slack bot with firebase + Bolt
kawamataryo
2
5.3k
Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究 / ref vs reactive Vue Composition API Deep in
kawamataryo
12
13k
僕とQiitaと、ときどきLT 〜アウトプット駆動でスキルを磨く〜
kawamataryo
0
320
元◯◯◯が話す 命を救うアルゴリズム
kawamataryo
0
190
Other Decks in Technology
See All in Technology
アーキテクチャを明文化して開発に臨んだ話
akkie76
0
360
Strategyパターン
hankehly
0
160
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
ritou
2
460
What's new in Vision
satotakeshi
0
220
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます!〜
miu_crescent
0
200
データ分析基盤のはじめかた
chanyou0311
0
130
スタートアップと技術選定と AWS
track3jyo
PRO
2
350
Google Cloud Updates 2022/05/16-05/31
no24oka
2
110
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
310
SwiftUI Layout
auramagi
1
120
OCI Service Mesh 概要 / OCI Service Mesh ovewview
oracle4engineer
PRO
0
100
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.9k
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
280k
Adopting Sorbet at Scale
ufuk
63
7.6k
Web Components: a chance to create the future
zenorocha
303
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
950
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Code Reviewing Like a Champion
maltzj
506
37k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Music & Morning Musume
bryan
35
4.2k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Three Pipe Problems
jasonvnalue
89
8.7k
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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢