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
   

   View Slide

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

   View Slide

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

   View Slide

4. Svelteͱ͸ʁ
   

   View 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 Slide

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

   View Slide

7. ࡞Δ΋ͷ
   

   View Slide

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

   View Slide

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/
   

   View Slide

10. ؀ڥߏங
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

15. manifestΛ࣮૷Λ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. svelteͰ࣮૷Λ͢Δ
    

    View Slide

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

    View Slide

22. ϖʔδλΠτϧͱ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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. ׬੒ʂʂʂʂʂ
    

    View Slide

33. ·ͱΊ
    

    View Slide

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

    View Slide

35. View Slide