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

Svelte + TypeScriptで
chrome拡張を作る

Avatar for sakito sakito
January 25, 2021

Svelte + TypeScriptで
chrome拡張を作る

Avatar for sakito

sakito

January 25, 2021
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

  1. 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
  2. ࡞Δ΋ͷ • ϖʔδλΠτϧͱURLΛ ΫϦοϓϘʔυʹίϐʔ͢Δ • ؀ڥ • Svelte • TypeScript

    • Google Chrome֦ு • manifest v3ରԠ • ੒Ռ෺ • https://github.com/sakito21/chrome-extension-clipboard-copy-title-and-link
  3. 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/
  4. 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
  5. Developer modeΛ༗ޮʹͯ֬͠ೝ͢Δ 1. ChromeΛ։͘ 2. chrome://extensions Λ։͘ 3. σϕϩούʔϞʔυͷtoggleΛONʹ͢Δ 4.

    ʮύοέʔδԽ͞Ε͍ͯͳ͍֦ுػೳʯΛಡΈࠐΉΛΫϦοΫ 5. ઌ΄Ͳ௥Ճͨ͠manifest.json͕͋ΔσΟϨΫτϦΛબ୒͢Δ 6. Ұཡʹ௥Ճ͞ΕΕ͹֬ೝ੒ޭ • npm installͱnpm run dev΋͘͠͸npm run buildΛ๨Εͣʹ