Buat Sambungan Penyemak Imbas dengan Vite TS

Mari kita mulakan latihan ini dengan memfokuskan pada penyediaan struktur sambungan yang paling asas, yang merangkumi hanya fail manifes dan pekerja perkhidmatan. Manifes bertindak sebagai fail konfigurasi, menyatakan perkara yang dibenarkan untuk dilakukan oleh sambungan, manakala pekerja perkhidmatan mengendalikan tugas latar belakang, terutamanya bertindak balas kepada peristiwa penyemak imbas, dalam hal ini, ia log apabila sambungan dipasang.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

manifest.json

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

latar belakang.js

Pekerja perkhidmatan boleh menjadi sekompleks yang diperlukan, tetapi kami akan memastikannya terus terang buat masa ini kerana matlamat tugas ini adalah untuk mengubah sambungan dua fail ringkas ini kepada projek Vite.

Jadi mengapa menggunakan Vite? Terutamanya kerana saya telah memutuskan untuk bekerja dengan TypeScript, yang akan meningkatkan kualiti kod, kebolehselenggaraan dan produktiviti dengan ketara. Selain menawarkan dokumentasi diri, TypeScript membenarkan saya menangkap ralat berkaitan jenis pada masa penyusunan dan bukannya pada masa jalan, meningkatkan pengalaman pembangunan keseluruhan.

Vite

Walaupun projek Node dengan TypeScript sudah memadai untuk menyusun kod TS saya ke dalam JavaScript vanila yang diperlukan oleh sambungan saya, saya memilih Vite. Vite, terutamanya dengan pengikat Rollupnya, menawarkan keupayaan yang luas seperti goncangan pokok dan pengurangan berkas. Selain itu, ekosistem pemalam Vite yang mantap akan membolehkan saya menyepadukan React dengan mudah jika saya memutuskan untuk membuat komponen UI untuk sambungan pada masa hadapan.

Dengan itu, mari mulakan dengan mencipta projek Vite menggunakan templat vanilla-tsnya.

npm create vite@latest simple-extension -- --template vanilla-ts

Selepas menjalankan arahan dan memasang kebergantungan, anda akan menyediakan projek web kecil dengan TypeScript. Walau bagaimanapun, memandangkan persediaan ini bukan seperti yang kami perlukan, kami akan mulakan dengan beberapa pembersihan. Mula-mula, padamkan fail index.html daripada folder akar, kerana ia tidak diperlukan lagi. Kemudian, alih keluar semua fail dalam folder src kecuali vite-env.d.ts, yang menyediakan definisi jenis untuk ciri khusus Vite. Akhir sekali, padamkan semua dalam folder awam.

⚠️ Jika anda menghadapi ralat dalam fail tsconfig anda tentang pilihan pengkompil yang tidak diketahui, pastikan editor anda menggunakan versi TypeScript yang sama yang dipasang untuk projek itu.

Seterusnya, buat fail baharu dalam folder src bernama background.ts dan salin kod daripada fail background.js asal ke dalamnya.

Anda tidak lama lagi akan menyedari bahawa TypeScript memerlukan konteks tambahan untuk berfungsi dengan betul, kerana ia tidak mengenali objek krom tanpa jenis yang sesuai. Untuk menangani masalah ini, pasang @types/chrome untuk memberikan definisi jenis yang diperlukan untuk chrome.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

Setelah dipasang, ralat TypeScript hilang. Walau bagaimanapun, anda mungkin melihat mesej amaran dalam panggilan balik onInstalled. Ini disebabkan oleh sifat linting yang telah dikonfigurasikan oleh Vite untuk kami dalam persediaan TypeScript kami.

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

tsconfig.json

Memandangkan kita mentakrifkan objek yang tidak digunakan, mari teruskan dan alih keluarnya. Itu sahaja yang kita perlukan, jadi sekarang kita boleh menyusun projek.

npm create vite@latest simple-extension -- --template vanilla-ts

Nampaknya terdapat masalah—konfigurasi Vite lalai masih cuba menggunakan beberapa fail yang baru kami alih keluar sebagai titik masuk kod.

npm i -D @types/chrome

Kami perlu menyesuaikan konfigurasi Vite kami untuk dijalankan dalam Mod Perpustakaan. Berikut ialah konfigurasi minimum yang diperlukan untuk projek ini.

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

vite.config.ts

Dalam konfigurasi di atas, kami hanya menetapkan input projek kepada ./src/background.ts dan melaraskan nama fail output kepada [name].js. Secara lalai, Vite menambahkan cincang pada nama fail untuk binaan pengeluaran (cth., background-[hash].js), tetapi kami memerlukan padanan nama fail yang tepat untuk manifes.json kami berfungsi dengan betul.

Bercakap tentang manifest.json, di manakah ia sepatutnya terletak? Bahagian ini adalah mudah: mana-mana fail yang perlu disalin seperti sedia ada, tanpa transformasi, ke folder output hendaklah diletakkan dalam folder awam. Sekarang, jika kami membina projek itu semula, kami akan mendapati sambungan penyemak imbas dua fail kami disusun dalam folder dist.

npm run build

Pemasangan

Sekarang mari sahkan semuanya berfungsi seperti yang diharapkan. Jika anda belum pernah menguji sambungan penyemak imbas secara setempat sebelum ini, cuma ikut langkah mudah ini:

1. Buka halaman Sambungan dengan memasukkan chrome://extensions dalam tab baharu.
2. Dayakan Mod Pembangun dengan menogol suis Mod Pembangun.
3. Klik Muat yang dibongkar dan pilih direktori sambungan, iaitu folder dist yang dijana oleh Vite. Dan itu sahaja! Sambungan kini dipasang. Jika anda mengklik pada pautan pekerja perkhidmatan, DevTools untuk pekerja perkhidmatan ini akan dibuka, di mana anda boleh melihat log yang dijana oleh pekerja kami dalam tindakan.

sambungan-simple-vite

Atas ialah kandungan terperinci Buat Sambungan Penyemak Imbas dengan Vite TS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!