Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Svelte + TypeScriptで
chrome拡張を作る

sakito
January 25, 2021

Svelte + TypeScriptで
chrome拡張を作る

sakito

January 25, 2021
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

  1. Svelte + TypeScriptͰ
    Chrome֦ுΛ࡞Δ
    Sakito

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Svelteͱ͸ʁ

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 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/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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

    View full-size slide

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

    View full-size slide

  13. manifestΛ࣮૷Λ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. svelteͰ࣮૷Λ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. ׬੒ʂʂʂʂʂ

    View full-size slide

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

    View full-size slide