閲覧履歴、ブックマーク、タブを横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi

by ryo

Slide 1

Slide 1 text

ӾཡཤྺɺϒοΫϚʔΫɺλϒΛ ԣஅతʹݕࡧͰ͖Δ Chrome֦ுΛ࡞ͬͨ࿩ @KawamataRyo 2022/02/16 ϑϩϯτΤϯυLTձ vol.6

Slide 2

Slide 2 text

ࣗݾ঺հ 👨🚒

Slide 3

Slide 3 text

@KawamataRyo 🔥 ݩফ๷࢜ 👨💻 Engineer @LAPRAS inc ❤ TypeScript, Vue, Firebase, Elixir 💪 झຯ ݒਨ

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ 💬

Slide 5

Slide 5 text

• ࠷ۙ࡞ͬͨChrome֦ுͷ঺հ • ࣮૷ͷϙΠϯτ • ։ൃͷ;Γ͔͑Γ

Slide 6

Slide 6 text

࡞ͬͨ΋ͷ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

ɾ ӾཡཤྺɺλϒɺϒοΫϚʔΫΛΠϯΫϦϝϯλϧαʔν   ɾ ๛෋ͳγϣʔτΧοτͰΩʔϘʔυͷΈͰ໨తͷϖʔδΛ ։͚Δ ɾεϥογϡίϚϯυͰͷॊೈͳݕࡧ΋Մೳ ػೳ

Slide 9

Slide 9 text

։ൃͷϞνϕʔγϣϯ🍺

Slide 10

Slide 10 text

ɾ TabΛ։͖͗ͯ͢໎ࢠʹͳΓ͕ͪ   ɾ ChromeͷݕࡧόʔͷαδΣετ͕ඍົʹऑ͍ ɾ େ఍ͷϖʔδ͸ɺҰ౓ߦͬͨࣄ͕͋Δ   ʢཤྺͰ୳ͤΔ͸ͣʣ

Slide 11

Slide 11 text

%&.0

Slide 12

Slide 12 text

Chrome web Store, Firefox Add-ons   ͰΠϯετʔϧՄೳʂʂ

Slide 13

Slide 13 text

࣮૷ͷϙΠϯτ

Slide 14

Slide 14 text

Viteese Webext Ͱͷര଎։ൃ https://github.com/antfu/vitesse-webext

Slide 15

Slide 15 text

Viteese Webext Ͱͷര଎։ൃ ɾ Chrome։ൃ؀ڥͷςϯϓϨʔτϦϙδτϦ ɾ ViteʹΑΔߴ଎ͳHMR ɾ Vue3ɾTypeScriptͷշదͳ։ൃ؀ڥ ɾ WebExtension ʹΑΔϚϧνϓϥοτϑΥʔϜϏϧυ

Slide 16

Slide 16 text

Fuse.jsͰͷFussy Searchͷ࣮૷ https://github.com/krisk/Fuse

Slide 17

Slide 17 text

Fuse.jsͰͷFussy Searchͷ࣮૷ ɾ Fussy SearchΛ؆୯ʹ࣮૷͢ΔͨΊͷϥΠϒϥϦ ɾ είΞϦϯάʹΑΔฒͼସ͑ ɾ ௚ײతͳݕࡧΩʔʢۭจࣈͰˍݕࡧͳͲʣ ɾ ҆ఆɾߴ଎ͳಈ࡞

Slide 18

Slide 18 text

Windi CSSͰͷελΠϦϯά https://github.com/windicss/windicss

Slide 19

Slide 19 text

Windi CSSͰͷελΠϦϯά ɾ Tailwind CSS ϥΠΫͳUtilitiy- fi rst CSS framwork ɾ ߴ଎ͳϏϧυ ɾ ॊೈͳࢦఆ ɾ μʔΫϞʔυͷରԠ

Slide 20

Slide 20 text

։ൃͷ;Γ͔͑Γ

Slide 21

Slide 21 text

։ൃஈ֊Ͱࠂ஌ͯ͠χʔζΛ֬ೝͰ͖ͨ͜ͱ Keep👍

Slide 22

Slide 22 text

ϓϩτλΠϓͷஈ֊ͰTwitterͰࠂ஌ ։ൃελʔτ3೔໨Ͱࠂ஌ 260͍͍Ͷɾ30RTͱ ޷ҙతͳϦπΠʔτɾϦϓϥΠ ͕ଟ͔ͬͨͷͰɺधཁʹ֬৴Λ࣋ͬͯ ։ൃΛਐΊΒΕͨ

Slide 23

Slide 23 text

టष͘޿ใΛؤுͬͨ͜ͱ Keep👍

Slide 24

Slide 24 text

σϞಈըͷ࡞੒

Slide 25

Slide 25 text

Product Hunt ΁ͷొ࿥

Slide 26

Slide 26 text

Launchi Day 7 Ґ 143 Upvoted Product Hunt ΁ͷొ࿥

Slide 27

Slide 27 text

ଟ਺ͷخ͍͠ίϝϯτ΋.. Product Hunt ΁ͷొ࿥

Slide 28

Slide 28 text

Zenn ΁ͷ౤ߘ

Slide 29

Slide 29 text

dev.to ΁ͷ౤ߘ

Slide 30

Slide 30 text

ษڧձͰͷLTʢࠓ೔ʣ

Slide 31

Slide 31 text

GitHub ʹιʔεΛެ։ͨ͜͠ͱ Keep👍

Slide 32

Slide 32 text

։ൃॳظ͔ΒύϒϦοΫϦϙδτϦͱͯ͠ެ։

Slide 33

Slide 33 text

ػೳվળͷPRΛଟ͘΋Β͑ͨ ςΩετϋΠϥΠτػೳ ͷ௥Ճ Performanceվળ ࡉ͔͍όάमਖ਼

Slide 34

Slide 34 text

ॳΊͯ100 Star ⭐ Λ௒͑ͨ ࠓ·Ͱ200ϦϙδτϦ͘Β͍࡞ͬͯ100௒͑ͨͷ͸ॳʂ 145 ⭐

Slide 35

Slide 35 text

Problem 📛 க໋తͳόάΛ࢒ͨ͠·· ॳճϦϦʔεΛͯ͠͠·ͬͨ

Slide 36

Slide 36 text

Chrome Web StoreɺChromeͷnewλϒϖʔδͰಈ͔ͳ͍… ݕࡧϞʔμϧΛContent ScriptͰ ϖʔδͷDOMʹΠϯδΣΫτͯ͠දࣔ ͍ͯͨͨ͠ΊɺContent Script͕ ಈ࡞͠ͳ͍ϖʔδͰىಈ͠ͳ͍. ※ ݱࡏ͸ɺPopupͰىಈ͢Δܗʹमਖ਼ͯ͠ճආ

Slide 37

Slide 37 text

·ͱΊ

Slide 38

Slide 38 text

• Chikamichi ࠷ߴศརͳͷͰ࢖ͬͯͶ • Viteese Webext ࠷ڧ • ࢖ͬͯ΋Β͏ͨΊʹ͸టष͍޿ใ͕େࣄ   • OSSਫ਼ਆଚ͍

Slide 39

Slide 39 text

͓ΘΓ

Slide 40

Slide 40 text

https://zenn.dev/ryo_kawamata/articles/4bf52f97165058 ※εϥΠυͷ಺༰ɾίʔυ͸ҎԼهࣄʹ΋·ͱΊͯ·͢