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

Svelte + TypeScriptで
chrome拡張を作る

2917a3c430817eb71086f8973c06ebba?s=47 sakito
January 25, 2021

Svelte + TypeScriptで
chrome拡張を作る

2917a3c430817eb71086f8973c06ebba?s=128

sakito

January 25, 2021
Tweet

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΋࢖͍΍ͯ͘͢ɺ։ൃͰ໎͏͜ͱ͕গͳ͍

  35. None