Svelte + TypeScriptͰ Chrome֦ுΛ࡞Δ Sakito

ࣗݾ঺հ • ໊લɿsakito • Twitterɿ@__sakito__ • ॴଐ • αΠϘ΢ζ גࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ

ΞδΣϯμ • Svelteͱ͸ʁ • ࡞Δ΋ͷ • ؀ڥߏங • manifestΛ࣮૷Λ͢Δ • svelteͰ࣮૷Λ͢Δ • ·ͱΊ

Svelteͱ͸ʁ

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

ར༻౓ͱຬ଍౓΋্͕͖͍ͬͯͯΔ ࢀরɿhttps://2020.stateofjs.com/ja-JP/technologies/front-end-frameworks/

࡞Δ΋ͷ

࡞Δ΋ͷ • ϖʔδλΠτϧͱURLΛ ΫϦοϓϘʔυʹίϐʔ͢Δ • ؀ڥ • Svelte • TypeScript • Google Chrome֦ு • manifest v3ରԠ • ੒Ռ෺ • https://github.com/sakito21/chrome-extension-clipboard-copy-title-and-link

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/

؀ڥߏங

ΤσΟλपΓ • VS Codeͷ৔߹Ͱઆ໌͢Δ • ެ֦ࣜுΛΠϯετʔϧ͢Δ • https://marketplace.visualstudio.com/items? itemName=svelte.svelte-vscode • ϑΥʔϚοτͷͨΊʹઃఆΛ௥Ճ͢Δ • Prettier֦ுͰ͸ϑΥʔϚοτͰ͖ͳ͍

Svelte + TypeScriptͷςϯϓϨʔτ • ެࣜͰ༻ҙ͞Ε͍ͯΔςϯϓϨʔτΛ࢖༻͢Δ • ͜Ε͸rollup͕ͩɺwebpackͰ΋Ͱ͖Δ • https://github.com/sveltejs/svelte-preprocess/blob/main/docs/ usage.md#with-svelte-loader

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

@types/chromeͷઃఆ • @types/chromeΛΠϯετʔϧ͢Δ • tsconfigͰ "types":["chrome","svelte"] Λࢦఆ͢Δ • ͜ΕͰChrome֦ுͷAPIͷܕ͕௨ΔΑ͏ʹͳΔ • “svelte”Λఆٛ͢Δ͜ͱΛ๨Εͳ͍Α͏ʹ͢Δ • ίϯύΠϧ͕௨Βͳ͘ͳΔ

manifestΛ࣮૷Λ͢Δ

manifestΛ࡞੒͢Δ • chrome֦ுʹ͸·ͣɺmanifest͕ඞཁ • manifest.jsonΛpublicσΟϨΫτϦ ʹ௥Ճ͢Δ

Developer modeΛ༗ޮʹͯ֬͠ೝ͢Δ 1. ChromeΛ։͘ 2. chrome://extensions Λ։͘ 3. σϕϩούʔϞʔυͷtoggleΛONʹ͢Δ 4. ʮύοέʔδԽ͞Ε͍ͯͳ͍֦ுػೳʯΛಡΈࠐΉΛΫϦοΫ 5. ઌ΄Ͳ௥Ճͨ͠manifest.json͕͋ΔσΟϨΫτϦΛબ୒͢Δ 6. Ұཡʹ௥Ճ͞ΕΕ͹֬ೝ੒ޭ • npm installͱnpm run dev΋͘͠͸npm run buildΛ๨Εͣʹ

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ͩͬͨͷͰ஫ҙ

PopupͷදࣔΛ֬ೝ • Popup͕දࣔͰ͖Δ͔֬ೝ͢ΔͨΊɺ֦ுΞΠίϯΛΫϦοΫ͢Δ • npm run dev͍ͯ͠Ε͹ࣗಈίϯύΠϧ͞Ε͍ͯΔ • ֦ுΞΠίϯΛӈΫϦοΫͯ͠ ʮϙοϓΞοϓΛݕূʯΛ͢Δ͜ͱͰɺ ઐ༻ͷDevTool্ཱ͕͕ͪΔɻ • ͜͜Ͱɺconsole.logͳͲΛ֬ೝͰ͖Δ

svelteͰ࣮૷Λ͢Δ

࡞Δ΋ͷ͓͞Β͍ • ϖʔδλΠτϧͱURLΛ ΫϦοϓϘʔυʹίϐʔ͢Δ

ϖʔδλΠτϧͱURLΛऔಘ͢Δ • chrome.tabs.queryͰλϒ৘ใ͕औಘͰ͖Δ • https://developer.chrome.com/docs/extensions/reference/tabs/#method-query • chrome.tabs.getCurrentͰ͸popup্͔Β͸औಘͰ͖ͳ͍ͷͰ஫ҙ • script಺ʹม਺Λએݴ͠ɺίϯςϯπʹ{}Λ࢖༻ͯ͠൓ө͠·͢ • ಺ʹελΠϧΛએݴ͢Δ͜ͱͰɺ ͜ͷίϯϙʔωϯτ಺ʹดͨ͡CSSΛॻ͘͜ͱ͕Ͱ͖·͢ • bodyͳͲͷglobalཁૉ͸public/global.cssΛ࡞੒͠ɺͦ͜ʹهࡌ͠·͢

ίϯϙʔωϯτΛ෼཭͢Δ • ίϯϙʔωϯτ͕௕͘ͳͬͨͷͰ෼཭͢Δ • ୯७ͳ΋ͷͰ͋Ε͹ɺ࢖͏ଆͰimport͢ΔͷΈ

ίϯϙʔωϯτΛ෼཭͢Δ • ίϯϙʔωϯτ͕௕͘ͳͬͨͷͰ෼཭͢Δ • ୯७ͳ΋ͷͰ͋Ε͹ɺ࢖͏ଆͰimport͢ΔͷΈ

ίϯϙʔωϯτΛ෼཭͢Δ • ಉ͡ཁྖͰContent΋ίϯϙʔωϯτ෼཭͢Δ • ͜ΕͰPopup.svelte͸͖ͬ͢Γͨ͠

ίϯςϯπΛ܁Γฦ͢ • ContentίϯϙʔωϯτͷηΫγϣϯ͸ಉ͡Α͏ͳHTMLͷ܁Γฦ͠ͳͷͰɺ ίϯςϯπΛ܁Γฦ͠දࣔͯ͠ɺ͞Βʹ͖ͬ͢Γͨ͠ • 1ͭ1ͭղઆ͢Δ

ίϯςϯπΛ܁Γฦ͢ • ܁Γฦ͠දࣔ͢ΔͨΊʹcontentItemsΛ࡞੒͢Δ

ίϯςϯπΛ܁Γฦ͢ • {#each contentItems as contentItem}ͰίϯςϯπΛ܁Γฦ͢ • https://svelte.dev/docs#each • {@html}ͰHTMLλάΛ൓ө͢Δ • https://svelte.dev/docs#html

ButtonΛ࣮૷͢Δ • ·ͣ͸ButtonͷHTMLͱCSSΛ࣮૷͠·͢ • Content.svelteʹimport͢Δ • Popup -> Content -> ButtonͰґଘ͍ͯ͠Δ

PropsΛ΋Β͏ • exportΛ͚ͭΔ͜ͱͰprops͕΋Β͑Δ • https://svelte.dev/docs#1_export_creates_a_component_prop • PropsΛ౉͢ଆͷ΄͏ͰɺVS CodeͩͱTSͷΤϥʔ͕ͰΔ • svelte-check͸௨ΔͷͰ໰୊ͳ͍ • ΤσΟλݻ༗ͷ໰୊Ά͍

Clipboardʹίϐʔ͢Δ • navigator.clipboardͰίϐʔ͕Ͱ͖Δ • https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard

׬੒ʂʂʂʂʂ

·ͱΊ

·ͱΊ • Svelte + TypeScript͸·ͩपลπʔϧ͕௥͍͍͍ͭͯͳ͍ • ؆୯ͳΞϓϦͩͱ୹͍ίʔυͰ࡞Εͯྑ͍ • υΩϡϝϯτ͕๛෋ͰAPI΋࢖͍΍ͯ͘͢ɺ։ൃͰ໎͏͜ͱ͕গͳ͍

No content