[MMOZirve Türkiye'nin En Büyük Oyun Forumu]

Yeni Mesajlar Yeni Konular Popüler Son Cevaplananlar Elmas Konular Forumlarda Ara

Ana Sayfa Web Geliştirme

Ana Sayfa Forum Web Geliştirme TypeScript Kullanarak Web-Ext İle Firefox Tarayıcı...

TypeScript Kullanarak Web-Ext İle Firefox Tarayıcı Eklentisi Geliştirme

Sosyalio · 2026-03-25T11:08:54+03:00

WebExtension Oyun AlanıFirefox Eklenti Mimarisini Anlamak: Geliştirmeye başlamadan önce, bir Firefox eklentisinin mimarisini anlamak önemlidir. Temel olarak, bir Firefox eklentisi bir araya getirilmiş HTML, CSS ve JavaScript dosyalarından oluşur. manifest.json adlı manifest dosyası, eklentinin temelini oluşturarak yapısını, izinlerini ve diğer kritik detaylarını tanımlar.Bir Firefox Eklentisinin Temel Bileşenleri: Manifest Dosyası (manifest.json): Eklenti meta verileri (ad, sürüm, izinler, betikler vb.). Arka Plan Betikleri: Tarayıcı olaylarını yöneten ve arka planda çalışan komut dosyaları. İçerik Betikleri: Web sayfalarına eklenip DOM ile etkileşen komut dosyaları. Popup HTML: Tarayıcı araç çubuğu simgesine tıklanınca görünen kullanıcı arayüzü. Seçenekler HTML: Eklenti ayarlarını yapılandırmak için kullanılan arayüz (isteğe bağlı). Simgeler ve Görüntüler: Eklentiyi temsil eden grafiksel öğeler. Adım 1: Gerekli Araçların Kurulumu Node.js ve npm (veya yarn): Eğer kurulu değilse, https://nodejs.org/ adresinden Node.js'i indirin ve kurun. npm, Node.js ile birlikte gelir. Alternatif olarak yarn kullanmak isterseniz, terminale npm install --global yarn yazarak kurabilirsiniz. TypeScript: TypeScript'i global olarak kurmak için terminalde aşağıdaki komutu çalıştırın: Bash: npm install --global typescript# veya yarn kullanıyorsanız: # yarn global add typescript Web-ext aracını kurmak için terminalde aşağıdaki komutu çalıştırarak web-ext aracını global olarak kurun: Bash: npm install --global web-ext # veya yarn kullanıyorsanız: # yarn global add web-ext Adım 2: Eklenti Projesi Oluşturma ve Yapılandırma Proje Dizini Oluşturma: Eklenti dosyalarınız için bir klasör oluşturun (örneğin, benim-eklentim). Bash: mkdir benim-eklentim cd benim-eklentim package.json Oluşturma: Projenizi npm veya yarn ile başlatmak için aşağıdaki komutu çalıştırın: Bash: npm init -y# veya yarn kullanıyorsanız: # yarn init -y Bu komut, proje hakkında temel bilgileri içeren bir package.json dosyası oluşturacaktır. TypeScript Yapılandırma Dosyası (tsconfig.json) Oluşturma: TypeScript derleyici seçeneklerini yapılandırmak için bir tsconfig.json dosyası oluşturmanız gerekir. Proje dizininde aşağıdaki komutu çalıştırın: Bash: tsc --init Bu, temel bir tsconfig.json dosyası oluşturacaktır. Bu dosyayı projenizin gereksinimlerine göre düzenleyebilirsiniz. Özellikle outDir (çıktı dizini) ve rootDir (kaynak dizini) seçeneklerini kontrol etmeniz önemlidir. Örneğin, TypeScript dosyalarınızı src adlı bir klasörde tutmak ve derlenmiş JavaScript dosyalarını dist adlı bir klasöre çıkarmak isteyebilirsiniz. Bu durumda tsconfig.json dosyanızda aşağıdaki gibi değişiklikler yapabilirsiniz: JSON: { "compilerOptions": { "target": "ES2017", "module": "ESNext", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": [ "src/**/*" ], "exclude": [ "node_modules" ] } manifest.json Oluşturma: Firefox eklentilerinin temel yapılandırma dosyasıdır. Proje dizininde (genellikle src veya dist klasörünün içinde değil, ana proje dizininde) manifest.json adında bir dosya oluşturun ve aşağıdaki gibi temel bilgileri ekleyin: JSON:

Sosyalio 25.03.2026 11:08 742 görüntüleme 9 cevap

‹1 2

Son Mesaj

NateMedia

Üye

Katılım09 Nis 2026

Konular9

Mesajlar79

Elmas Konular0

Başarım0

ZirveCoin 0

Ticaret Puanı

+0 -0

05.05.2026 15:07 #9

Paylaşım için teşekkürler.

Sosyalio

Üye

Katılım24 Mar 2026

Konular8

Mesajlar61

Elmas Konular0

Başarım0

ZirveCoin 0

Ticaret Puanı

+0 -0

05.05.2026 20:02 #10

Paylaşım için teşekkürler. Başarılısın toprağım

Paylasim için teşekkürlerin eline sağlık

Paylaşım için teşekkürler.

Yorumlarınız için teşekkür ederim.

+

Konuya web eklentileri için, Jarek ve Oliver Dunk'ın da katkıda bulunduğu bir oyun alanı düzenleyicisi eklenmiştir.
https://github.com/oliverdunk/web-extension-playground