web extension starter

Web-Extension-Starter

Starter ekstensi web untuk membangun ekstensi "write one run on apapun browser"

? ‍♂️ Dibuat oleh @abhijithvijayan

Donasi: Paypal , Patreon

---

❤️ itu? ️ itu di github atau tweet tentang itu.

? ‍Μogrip reaksi + naskah = cabang ini

? React + javascript = checkout react-javascript cabang

?? Html + javascript = checkout master branch

Fitur

• Dukungan Cross Browser (Web-Extensions API)
• Generasi manifes yang disesuaikan dengan browser
• Bangunan otomatis di atas perubahan kode
• File build spesifik paket otomatis browser
• Styling Sass
• Naskah naskah secara default
• Dukungan Modul ES6
• Bereaksi pustaka UI secara default
• Muat ulang cerdas

Dukungan Browser

49 & kemudian ✔	52 & nanti ✔	36 & kemudian ✔	79 & kemudian ✔	Terbaru ✔	Terbaru ✔	Terbaru ✔

Digunakan oleh ekstensi dalam produksi yang memiliki lebih dari 100.000 pengguna.

• Daily.dev in Daily.dev Extension
• Jiffy Reader di Ansh/Jiffyreader.com
• KUTT-Extension di Abhijithvijayan/Kutt-Extension
• Doubanimdb di Lisongx/Doubanimdb
• Asisten MOOC di Unbyte/MOOC-Assistant
• Artipub di Crawlab-Team/Artipub

Dan banyak lagi ...

Gunakan template ini

Buat direktori baru dan jalankan

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

Awal yang cepat

Pastikan Anda memiliki

• Node.js 10 atau yang lebih baru diinstal

Kemudian jalankan berikut ini:

• npm install untuk menginstal dependensi.
• npm run dev:chrome Untuk Memulai Server Pengembangan untuk Ekstensi Chrome
• npm run dev:firefox Untuk Memulai Server Pengembangan untuk Addon Firefox
• npm run dev:opera Untuk Memulai Server Pengembangan untuk Ekstensi Opera
• npm run build:chrome untuk Membangun Ekstensi Chrome
• npm run build:firefox untuk Membangun Firefox Addon
• npm run build:opera untuk Membangun Ekstensi Opera
• npm run build Build dan Paket Ekstensi Sekaligus ke Ekstensi/ Direktori

Perkembangan

• npm install untuk menginstal dependensi.

• Untuk menonton perubahan file dalam pengembangan

  • Chrome
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • Opera
    • npm run dev:opera

• Muat ekstensi di browser

• Chrome

  • Buka bilah alamat browser dan ketik chrome://extensions
  • Periksa tombol Developer Mode untuk mengaktifkannya.
  • Klik tombol Load Unpacked Extension…
  • Pilih folder browser Anda di extension/ .

• Firefox

  • Muat add-on via about:debugging sebagai add-on sementara.
  • Pilih file manifest.json di direktori yang diekstraksi

• Opera

  • Muat ekstensi melalui opera:extensions
  • Periksa Developer Mode dan muat saat dibongkar dari direktori ekstrak ekstensi.

Produksi

• npm run build membangun ekstensi untuk semua browser ke direktori extension/BROWSER masing -masing.

Catatan: Secara default manifest.json diatur dengan versi 0.0.0 . Webpack Loader akan memperbarui versi dalam Build dengan versi package.json . Untuk merilis versi baru, perbarui versi di package.json dan jalankan skrip.

Jika Anda tidak ingin menggunakan versi package.json , Anda dapat menonaktifkan opsi di sini.

Menghasilkan browser spesifik manifest.json

Perbarui source/manifest.json File dengan Browser Vendor Prefixed Manifest Keys

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

Jika vendornya adalah chrome ini dikompilasi untuk:

 {
  "name" : "SuperChrome" ,
}

---

Tambahkan kunci ke beberapa vendor dengan memisahkan mereka dengan | di awalan

 {
  __chrome|opera__name: "SuperBlink"
}

Jika vendornya adalah chrome atau opera , ini dikompilasi untuk:

 {
  "name": "SuperBlink"
}

Lihat Readme asli dari paket wext-manifest-loader untuk lebih jelasnya

Serangga

Harap ajukan masalah di sini untuk bug, dokumentasi yang hilang, atau perilaku yang tidak terduga.

Konfigurasi Linting & TypeScript

• Konfigurasi Eslint & yang lebih cantik - @abhijithvijayan/eslint-config
• Konfigurasi TypeScript Bersama - @abhijithvijayan/tsconfig

Lisensi

MIT © Abhijith Vijayan