Svelte + TypeScriptで chrome拡張を作る

レポジトリ
https://github.com/sakit0/chrome-extension-clipboard-copy-title-and-link

Twitter
https://twitter.com/__sakito__

Transcript

1. Svelte + TypeScriptͰ Chrome֦ுΛ࡞Δ Sakito
2. ࣗݾ঺հ • ໊લɿsakito • Twitterɿ@__sakito__ • ॴଐ • αΠϘ΢ζ גࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ
3. ΞδΣϯμ • Svelteͱ͸ʁ • ࡞Δ΋ͷ • ؀ڥߏங • manifestΛ࣮૷Λ͢Δ • svelteͰ࣮૷Λ͢Δ • ·ͱΊ
4. Svelteͱ͸ʁ
5. Svelteͱ͸? • React,Vue,AngularͷΑ͏ʹએݴతʹUIΛॻ͚Δ • গͳ͍ίʔυͰ࣮૷͕Ͱ͖Δ • https://svelte.dev/blog/write-less-code • Ծ૝DOMͳͲΛ࢖༻ͤͣɺϏϧυ࣌ʹ࠷దͳόχϥJSʹม׵͢Δ • ͦͷ্ύϑΥʔϚϯε΋༏Ε͍ͯΔ • TypeScript΁ͷରԠ΋͞Εͨ • https://svelte.dev/blog/svelte-and-typescript • ৄ͘͠͸ͪ͜ΒΛࢀর͢Δͱྑ͍ • ެࣜղઆ • https://svelte.dev/blog/svelte-3-rethinking-reactivity • ೔ຊޠͰղઆͯ͘͠Ε͍ͯΔਓ΋ • https://zenn.dev/toshitoma/articles/what-is-svelte
6. ར༻౓ͱຬ଍౓΋্͕͖͍ͬͯͯΔ ࢀরɿhttps://2020.stateofjs.com/ja-JP/technologies/front-end-frameworks/
7. ࡞Δ΋ͷ
8. ࡞Δ΋ͷ • ϖʔδλΠτϧͱURLΛ ΫϦοϓϘʔυʹίϐʔ͢Δ • ؀ڥ • Svelte • TypeScript • Google Chrome֦ு • manifest v3ରԠ • ੒Ռ෺ • https://github.com/sakito21/chrome-extension-clipboard-copy-title-and-link
9. Chrome֦ு - manifest v3 • Chrome 88͔Βmanifest v3ʹͳͬͨ • https://blog.chromium.org/2020/12/manifest-v3-now-available- on-m88-beta.html • ࡢ೥ɺ։ൃऀΛࢧԉ͢ΔChromeެࣜͷυΩϡϝϯταΠτ͕Ͱ͖ͨ • https://developer.chrome.com/ • ͜͜ʹmanifest v3ͷ৘ใ͕͋Δ • https://developer.chrome.com/docs/extensions/
10. ؀ڥߏங
11. ΤσΟλपΓ • VS Codeͷ৔߹Ͱઆ໌͢Δ • ެ֦ࣜுΛΠϯετʔϧ͢Δ • https://marketplace.visualstudio.com/items? itemName=svelte.svelte-vscode • ϑΥʔϚοτͷͨΊʹઃఆΛ௥Ճ͢Δ • Prettier֦ுͰ͸ϑΥʔϚοτͰ͖ͳ͍
12. Svelte + TypeScriptͷςϯϓϨʔτ • ެࣜͰ༻ҙ͞Ε͍ͯΔςϯϓϨʔτΛ࢖༻͢Δ • ͜Ε͸rollup͕ͩɺwebpackͰ΋Ͱ͖Δ • https://github.com/sveltejs/svelte-preprocess/blob/main/docs/ usage.md#with-svelte-loader
13. LintͱFormatͷઃఆ • ͜ΕΒΛ࢖༻͢Δ • eslint-plugin-svelte3 • https://github.com/sveltejs/eslint-plugin-svelte3 • prettier-plugin-svelte • https://github.com/sveltejs/prettier-plugin-svelte • ͔͠͠ɺESLint + Svelte + TypeScriptͷରԠ͕·ͩ… • https://github.com/sveltejs/eslint-plugin-svelte3/issues/68 • svelte-check͕ॾʑνΣοΫͯ͘͠ΕΔͷͱɺVS Code্͸ਖ਼ৗʹಈ͘ • ৄ͍͠ઃఆ͸ͪ͜Β • https://github.com/sakito21/chrome-extension-clipboard-copy-title-and-link/blob/main/.eslintrc.js
14. @types/chromeͷઃఆ • @types/chromeΛΠϯετʔϧ͢Δ • tsconfigͰ "types":["chrome","svelte"] Λࢦఆ͢Δ • ͜ΕͰChrome֦ுͷAPIͷܕ͕௨ΔΑ͏ʹͳΔ • “svelte”Λఆٛ͢Δ͜ͱΛ๨Εͳ͍Α͏ʹ͢Δ • ίϯύΠϧ͕௨Βͳ͘ͳΔ
15. manifestΛ࣮૷Λ͢Δ
16. manifestΛ࡞੒͢Δ • chrome֦ுʹ͸·ͣɺmanifest͕ඞཁ • manifest.jsonΛpublicσΟϨΫτϦ ʹ௥Ճ͢Δ
17. Developer modeΛ༗ޮʹͯ֬͠ೝ͢Δ 1. ChromeΛ։͘ 2. chrome://extensions Λ։͘ 3. σϕϩούʔϞʔυͷtoggleΛONʹ͢Δ 4. ʮύοέʔδԽ͞Ε͍ͯͳ͍֦ுػೳʯΛಡΈࠐΉΛΫϦοΫ 5. ઌ΄Ͳ௥Ճͨ͠manifest.json͕͋ΔσΟϨΫτϦΛબ୒͢Δ 6. Ұཡʹ௥Ճ͞ΕΕ͹֬ೝ੒ޭ • npm installͱnpm run dev΋͘͠͸npm run buildΛ๨Εͣʹ
18. PopupΛ࡞੒͢Δ • ֦ுΞΠίϯΛΫϦοΫ͢ΔͱPopup͕Ͱͯ͘ΔઃఆΛ͢Δ • https://developer.chrome.com/docs/extensions/mv3/user_interface/#popup • piblicσΟϨΫτϦͷindex.htmlΛpopup.htmlʹมߋ͢Δ • ͍ͭͰʹςϯϓϨʔτͷappͱͳ͍ͬͯΔ෦෼Λpopupʹมߋ • global.css΍favicon΋࡟আ͢Δ • manifest.jsonͷ action:{default_popup": "popup.html}" Λ௥Ճ • v2Ͱ͸browser_actionͩͬͨͷͰ஫ҙ
19. PopupͷදࣔΛ֬ೝ • Popup͕දࣔͰ͖Δ͔֬ೝ͢ΔͨΊɺ֦ுΞΠίϯΛΫϦοΫ͢Δ • npm run dev͍ͯ͠Ε͹ࣗಈίϯύΠϧ͞Ε͍ͯΔ • ֦ுΞΠίϯΛӈΫϦοΫͯ͠ ʮϙοϓΞοϓΛݕূʯΛ͢Δ͜ͱͰɺ ઐ༻ͷDevTool্ཱ͕͕ͪΔɻ • ͜͜Ͱɺconsole.logͳͲΛ֬ೝͰ͖Δ
20. svelteͰ࣮૷Λ͢Δ
21. ࡞Δ΋ͷ͓͞Β͍ • ϖʔδλΠτϧͱURLΛ ΫϦοϓϘʔυʹίϐʔ͢Δ
22. ϖʔδλΠτϧͱURLΛऔಘ͢Δ • chrome.tabs.queryͰλϒ৘ใ͕औಘͰ͖Δ • https://developer.chrome.com/docs/extensions/reference/tabs/#method-query • chrome.tabs.getCurrentͰ͸popup্͔Β͸औಘͰ͖ͳ͍ͷͰ஫ҙ • script಺ʹม਺Λએݴ͠ɺίϯςϯπʹ{}Λ࢖༻ͯ͠൓ө͠·͢ • <style>಺ʹελΠϧΛએݴ͢Δ͜ͱͰɺ ͜ͷίϯϙʔωϯτ಺ʹดͨ͡CSSΛॻ͘͜ͱ͕Ͱ͖·͢ • bodyͳͲͷglobalཁૉ͸public/global.cssΛ࡞੒͠ɺͦ͜ʹهࡌ͠·͢
23. ίϯϙʔωϯτΛ෼཭͢Δ • ίϯϙʔωϯτ͕௕͘ͳͬͨͷͰ෼཭͢Δ • ୯७ͳ΋ͷͰ͋Ε͹ɺ࢖͏ଆͰimport͢ΔͷΈ
24. ίϯϙʔωϯτΛ෼཭͢Δ • ίϯϙʔωϯτ͕௕͘ͳͬͨͷͰ෼཭͢Δ • ୯७ͳ΋ͷͰ͋Ε͹ɺ࢖͏ଆͰimport͢ΔͷΈ
25. ίϯϙʔωϯτΛ෼཭͢Δ • ಉ͡ཁྖͰContent΋ίϯϙʔωϯτ෼཭͢Δ • ͜ΕͰPopup.svelte͸͖ͬ͢Γͨ͠
26. ίϯςϯπΛ܁Γฦ͢ • ContentίϯϙʔωϯτͷηΫγϣϯ͸ಉ͡Α͏ͳHTMLͷ܁Γฦ͠ͳͷͰɺ ίϯςϯπΛ܁Γฦ͠දࣔͯ͠ɺ͞Βʹ͖ͬ͢Γͨ͠ • 1ͭ1ͭղઆ͢Δ
27. ίϯςϯπΛ܁Γฦ͢ • ܁Γฦ͠දࣔ͢ΔͨΊʹcontentItemsΛ࡞੒͢Δ
28. ίϯςϯπΛ܁Γฦ͢ • {#each contentItems as contentItem}ͰίϯςϯπΛ܁Γฦ͢ • https://svelte.dev/docs#each • {@html}ͰHTMLλάΛ൓ө͢Δ • https://svelte.dev/docs#html
29. ButtonΛ࣮૷͢Δ • ·ͣ͸ButtonͷHTMLͱCSSΛ࣮૷͠·͢ • Content.svelteʹimport͢Δ • Popup -> Content -> ButtonͰґଘ͍ͯ͠Δ
30. PropsΛ΋Β͏ • exportΛ͚ͭΔ͜ͱͰprops͕΋Β͑Δ • https://svelte.dev/docs#1_export_creates_a_component_prop • PropsΛ౉͢ଆͷ΄͏ͰɺVS CodeͩͱTSͷΤϥʔ͕ͰΔ • svelte-check͸௨ΔͷͰ໰୊ͳ͍ • ΤσΟλݻ༗ͷ໰୊Ά͍
31. Clipboardʹίϐʔ͢Δ • navigator.clipboardͰίϐʔ͕Ͱ͖Δ • https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
32. ׬੒ʂʂʂʂʂ
33. ·ͱΊ
34. ·ͱΊ • Svelte + TypeScript͸·ͩपลπʔϧ͕௥͍͍͍ͭͯͳ͍ • ؆୯ͳΞϓϦͩͱ୹͍ίʔυͰ࡞Εͯྑ͍ • υΩϡϝϯτ͕๛෋ͰAPI΋࢖͍΍ͯ͘͢ɺ։ൃͰ໎͏͜ͱ͕গͳ͍