Plasmo Framework

Plasmo Framework, hacker ruhlu yazılımcılar tarafından hacker ruhlu yazılımcılar için yapılmış pille dolu bir tarayıcı uzantısı geliştirme kiti'dir.

Tarayıcı uzantılarının Next.js'i gibi.

Öne Çıkan Özellikler

First-class React + Typescript Desteği
Declarative Geliştirme
Content Scripts UI
Sekme Sayfaları
Canlı-reloading + React HMR
.env* dosyaları
Storage API'ı
Messaging API'ı
Remote code bundle'lama (örn: Google Analytics için)
Birden çok tarayıcı ve manifest eşi hedefleme
BPP ile otomatik deploy
İsteğe bağlı Svelte ve Vue desteği

Ve daha, daha fazlası! 🚀

Sistem Gereksinimleri

Node.js 16.x ve üzeri
MacOS, Windows veya Linux
(Şiddetle Tavsiye) pnpm

Örnekler

Plasmo'nun Firebase Authentication, Redux, Supabase authentication, Tailwind ve çok daha fazlası ile nasıl kullanılabileceğini gösteren örneklerimiz mevcut. Bunları görmek için örnekler repomuzu ziyaret edin.

Dökümantasyon

Plasmo Framework'u hakkında daha derinlemesine bilgi edinmek için dökümantasyon'a göz atın.

Tarayıcı Uzantıları Kitabı

Tarayıcı uzantılarının nasıl çalıştığına ve nasıl geliştirileceğine dair daha derinlemesine bir bakış için Matt Frisbie'nin yeni kitabı "Building Browser Extensions"ı şiddetle tavsiye ediyoruz.

Kullanım

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

Önümüzdeki yol birçok virajla dolu.

Popup değişiklikleri popup.tsx dosyasına eklenir
Seçenekler sayfası değişiklikleri options.tsx dosyasına eklenir
Content script değişiklikleri content.ts dosyasına eklenir
Arka plan hizmet çalışanı değişiklikleri background.ts dosyasına eklenir

Dizinler

Bu dosyaları kendi dizinlerine sahip olacak şekilde de düzenleyebilirsiniz:

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
...

Son olarak, kaynak kodunu kök dizinine koymak yerine src alt dizinine koymak için bu kılavuzu izleyebilirsin. assets'lerinizin ve diğer config dosyalarının yine de kök dizininde olması gerekeceğini unutmayın.

Desteklenen Tarayıcılar

Desteklenen tarayıcı hedeflerinin bir listesini görmek için lütfen buradaki dökümantasyon'a bakın.

Topluluk

Plasmo topluluğu Discord'da. Bu Plasmo Framework'ü kullanma konusunda yardım almak için uygun bir kanaldır.

Davranış Kurallarımız tüm Plasmo topluluk kanalları için geçerlidir.

Katkıda bulunma

Daha fazla bilgi edinmek için lütfen katkıda bulunma yönergelerine bakın.

Katkıda bulunan tüm harika katılımcılarımıza çok teşekkür ederiz ❤️

Eğlenceye katılmaktan ve PR göndermekten çekinmeyin!