Framework Plasmo

Framework Plasmo adalah SDK ekstensi browser penuh daya yang dibuat oleh hacker untuk hacker. Bangun produk Anda dan berhenti khawatir terhadap file konfigurasi dan berbagai macam anomali dalam membuat ekstensi browser.

Seperti Next.js untuk ekstensi browser!

Fitur Utama

First-class React + Typescript Support
Declarative Development
Content Scripts UI
Tab Pages
Live-reloading + React HMR
.env* files
Storage API
Messaging API
Remote code bundling (contohnya: untuk Google Analytics)
Penargetan beberapa browser dan manifest
Deployment otomatis melalui BPP
Dukungan opsional untuk Svelte dan Vue

Dan masih banyak lagi! 🚀

Kebutuhan Sistem

Node.js 16.x atau lebih tinggi
MacOS, Windows, atau Linux
(Sangat direkomendasikan) pnpm

Examples

Kami memiliki contoh yang menunjukkan bagaimana anda dapat menggunakan Plasmo Firebase Authentication, Redux, Supabase authentication, Tailwind, dan banyak masih banyak lagi. Untuk mencobanya, kunjungi repositori contoh kami.

Dokumentasi

Lihat dokumentasi untuk mendapatkan gambaran yang lebih mendalam mengenai Framework Plasmo.

Browser Extensions Book

Untuk gambaran yang lebih mendalam tentang cara kerja ekstensi browser, dan cara mengembangkannya, kami sangat merekomendasikan buku baru Matt Frisbie "Building Browser Extensions"

Cara Penggunaan

pnpm create plasmo example-dir
cd example-dir
pnpm dev

Jalan di depan dipenuhi dengan banyak pilihan.

Mengubah Popup lakukan di popup.tsx
Mengubah Options page lakukan di options.tsx
Mengubah Content script lakukan di content.ts
Mengubah Background service worker lakukan di background.ts

Direktori

Anda juga dapat mengatur file-file ini di direktori mereka sendiri:

ext-dir
├───assets
|   └───icon.png
├───popup
|   ├───index.tsx
|   └───button.tsx
├───options
|   ├───index.tsx
|   ├───utils.ts
|   └───input.tsx
├───contents
|   ├───site-one.ts
|   ├───site-two.ts
|   └───site-three.ts
...

Terakhir, Anda juga dapat menghindari menempatkan kode sumber di direktori root dengan menempatkannya di sub-direktori src, mengikuti panduan ini. Perhatikan bahwa assets dan file konfigurasi lainnya masih perlu berada di direktori root.

Browser yang Didukung

Untuk melihat daftar target browser yang didukung, lihat dokumentasi kami di sini.

Komunitas

Komunitas Plasmo dapat ditemukan di Discord. Ini adalah saluran yang tepat untuk mendapatkan bantuan dalam menggunakan Plasmo Framework.

Pedoman Perilaku kami berlaku untuk semua saluran komunitas Plasmo.

Berkontribusi

Silahkan lihat pedoman kontribusi untuk mempelajari lebih lanjut.

Terima kasih banyak untuk semua yang luar biasa kontributor ❤️

Jangan ragu untuk ikut bersenang-senang dan mengirim PR!