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

Kısa Bakış: 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 temel...

Genişletmek için tıkla ...

Konu İçeriği — Hızlı Bakış ( cPanel / Web • ⏱ ~6 dk okuma • Kod: JSON)
01. Firefox Eklenti Mimarisini Anlamak:
02. Bir Firefox Eklentisinin Temel Bileşenleri:
03. Adım 1: Gerekli Araçların Kurulumu
04. Adım 2: Eklenti Projesi Oluşturma ve Yapılandırma
05. Adım 3: TypeScript Kodlarını Yazma
06. Adım 4: TypeScript Kodlarını JavaScript'e Derleme

Genişletmek için tıkla ...

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

1. Node.js ve npm (veya yarn): Eğer kurulu değilse, 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.
2. 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

3. Web-ext aracını kurmak için terminalde aşağıdaki komutu çalıştırarak web-ext aracını global olarak kurun:
4. 
   
   Bash:

   npm install --global web-ext
   # veya yarn kullanıyorsanız:
   # yarn global add web-ext

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

2. 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.
3. 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"
     ]
   }

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

   {  "manifest_version": 3,
     "name": "Benim TypeScript Eklentim",
     "version": "1.0",
     "description": "TypeScript ile geliştirilmiş bir Firefox eklentisi",
     "permissions": [
       // Eklentinizin ihtiyaç duyduğu izinleri buraya ekleyin
     ],
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content.js"]
       }
     ],
     "background": {
       "service_worker": "background.js"
     },
     "browser_action": {
       "default_popup": "popup.html",
       "default_icon": {
         "16": "images/icon16.png",
         "48": "images/icon48.png",
         "128": "images/icon128.png"
       }
     },
     "icons": {
       "16": "images/icon16.png",
       "48": "images/icon48.png",
       "128": "images/icon128.png"
     }
   }

   Bu dosyayı eklentinizin gereksinimlerine göre düzenleyin. Özellikle name, version, description, permissions, content_scripts, background, browser_action ve icons alanlarına dikkat edin.

1. Kaynak Klasörü Oluşturma: Eğer tsconfig.json dosyanızda rootDir olarak src belirttiyseniz, bu klasörü oluşturun:
   
   
   Bash:

   mkdir src

2. TypeScript Dosyaları Oluşturma: src klasörü içinde eklentinizin mantığını içeren TypeScript dosyalarını oluşturun (örneğin, content.ts, background.ts, popup.ts).
3. TypeScript Kodlarını Yazma: Bu dosyalara TypeScript kodlarınızı yazın. Örneğin, src/content.ts dosyasına basit bir içerik betiği ekleyebilirsiniz:
   
   
   JavaScript:

   console.log("Bu bir içerik betiğidir!");

   src/background.ts dosyasına bir arka plan betiği:
   
   
   JavaScript:

   console.log("Bu bir arka plan betiğidir!");

   Eğer bir popup'ınız varsa, src/popup.ts dosyasına popup'ın mantığını yazabilirsiniz. Ayrıca src klasöründe popup.html ve images gibi diğer gerekli dosyaları da oluşturabilirsiniz.

1. Derleme Komutunu Çalıştırma: Terminalde proje dizininizde aşağıdaki komutu çalıştırın:
   
   
   Bash:

   tsc

   Bu komut, tsconfig.json dosyasındaki ayarlara göre src klasöründeki TypeScript dosyalarını derleyecek ve outDir ile belirttiğiniz klasöre (örneğin, dist) JavaScript dosyalarını (örneğin, content.js, background.js, popup.js) oluşturacaktır.

{
  "manifest_version": 3,
  "name": "Benim TypeScript Eklentim",
  "version": "1.0",
  "description": "TypeScript ile geliştirilmiş bir Firefox eklentisi",
  "permissions": [
    // ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["dist/content.js"]
    }
  ],
  "background": {
    "service_worker": "dist/background.js"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

1. Proje Ana Dizinine Gidin: Terminalde manifest.json dosyasının bulunduğu ana proje dizinine gidin.
2. Eklentiyi Çalıştırma: Aşağıdaki komutu kullanarak eklentiyi geçici bir Firefox profilinde çalıştırabilirsiniz:
   
   
   Bash:

   web-ext run

   Veya belirli bir geliştirme profiliniz varsa:
   
   
   Bash:

   web-ext run --profile "geliştirme_profilinizin_adı"

   web-ext, eklentinizi Firefox'ta açacak ve geliştirme sürecinde yaptığınız değişiklikleri otomatik olarak yeniden yükleyecektir (bazı durumlarda Firefox'u yeniden başlatmanız gerekebilir).
   
   

• TypeScript'i İzleme Modunda Çalıştırma: Geliştirme sırasında TypeScript dosyalarınızda değişiklik yaptıkça otomatik olarak derlenmelerini sağlamak için TypeScript derleyicisini izleme modunda çalıştırabilirsiniz:
  
  
  Bash:

  tsc -w# veya
  # tsc --watch

  Bu komutu ayrı bir terminal penceresinde çalıştırarak, kodunuzu her kaydettiğinizde JavaScript dosyalarının otomatik olarak güncellenmesini sağlayabilirsiniz.
• web-ext Otomatik Yenileme: web-ext run genellikle dosya değişikliklerini algılar ve eklentiyi otomatik olarak yeniden yükler. Ancak bazı durumlarda (özellikle yapılandırma dosyalarında yapılan değişikliklerde) Firefox'u manuel olarak yeniden başlatmanız gerekebilir.
• Hata Ayıklama: Firefox Geliştirici Araçları'nı (Araçlar > Web Geliştiricisi) kullanarak eklentinizin arka plan betiğini, içerik betiklerini ve popup'ını inceleyebilir, hataları ayıklayabilirsiniz. "Eklenti Hata Ayıklayıcısı" aracı özellikle eklentiye özgü hataları ve günlükleri görmek için kullanışlıdır.
• Build Script'leri Ekleme: package.json dosyanızın scripts bölümüne derleme ve izleme komutlarını ekleyerek geliştirme sürecinizi kolaylaştırabilirsiniz:
  
  
  JSON:

  "scripts": {  "build": "tsc",
    "watch": "tsc -w",
    "start": "web-ext run"
  }

  Bu sayede npm run build, npm run watch veya npm run start komutlarını kullanarak ilgili işlemleri gerçekleştirebilirsiniz.
  Bu adımları takip ederek TypeScript ile Firefox eklentileri geliştirebilir ve web-ext aracını kullanarak bu eklentileri kolayca test edebilirsiniz.