Özel DOM Kuralları

Belirli web sitelerinde çeviri davranışını kontrol etmek için özel DOM kurallarını yapılandırın

Genel Bakış

Read Frog, öğelerin belirli web sitelerinde nasıl çevrildiğini kontrol etmek için özel DOM kuralları tanımlamanıza olanak tanır. Bu kurallar dom-rules.ts'da tanımlanmıştır ve iki ana davranışı destekler:

Öğelerin çevrilmemesini zorla - Belirli öğeler için çeviriyi atla
Blok çevirisini zorla - Satır içi öğelerin blok öğeleri olarak çevrilmesini sağlayın (satır sonlarıyla)

Yapılandırma Dosyası Konumu

Özel kurallar extension repository'da tanımlanmıştır:

src/utils/constants/dom-rules.ts

Kullanılabilir Kural Türleri

1. Özel Öğe Seçicilere Girmeyin

Belirli etki alanlarındaki belirli öğelerin çevrilmesini önlemek için CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP kullanın.

Söz dizimi:

export const CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP: Record<string, string[]> = {
  'example.com': [
    '.selector-1',
    '#element-id',
    'custom-element > *',
  ],
}

Örnek:

export const CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP: Record<string, string[]> = {
  'chatgpt.com': [
    '.ProseMirror',
  ],
  'arxiv.org': [
    '.ltx_listing',
  ],
  'www.reddit.com': [
    'faceplate-screen-reader-content > *',
    'reddit-header-large *',
    'shreddit-comment-action-row > *',
  ],
  'www.youtube.com': [
    '#masthead-container *',
    '#guide-inner-content *',
    '#metadata *',
    '#channel-name',
    '.translate-button',
    '.yt-lockup-metadata-view-model__metadata',
    '.yt-spec-avatar-shape__badge-text',
    '.shortsLockupViewModelHostOutsideMetadataSubhead',
    'ytd-comments-header-renderer',
    '#top-row',
    '#header-author',
    '#reply-button-end',
    '#more-replies',
    '#info',
    '#badges *',
  ],
}

Kullanım Durumları:

Gezinme menülerini ve başlıklarını atla
Etkileşimli kullanıcı arayüzü öğelerini hariç tutun
Kod editörlerinin veya teknik içeriğin çevirisini önleyin
Meta veri bölümlerini çevirmekten kaçının

2. Özel Kuvvet Bloğu Çeviri Seçicileri

Satır içi öğelerin blok öğeler (satır sonlarıyla birlikte) olarak çevrilmesini zorlamak için CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP kullanın.

Söz dizimi:

export const CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP: Record<string, string[]> = {
  'example.com': [
    '.force-block-selector',
  ],
}

Örnek:

export const CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP: Record<string, string[]> = {
  'github.com': [
    '.react-directory-row-commit-cell *',
  ],
}

Kullanım Durumları:

Taahhüt mesajlarının ayrı satırlarda görünmesini zorla
Liste öğelerinin ayrı ayrı çevrildiğinden emin olun
Yoğun satır içi içeriği bölerek okunabilirliği artırın

Özel Kurallar Nasıl Eklenir?

1. Adım: Web Sitesi Alan Adını Tanımlayın

Alan adının tamamını tarayıcının adres çubuğunda göründüğü şekliyle kullanın:

https://example.com için 'example.com' kullanın
https://www.example.com için 'www.example.com' kullanın

Adım 2: Öğe Seçicileri Bulun

CSS seçicilerini bulmak için tarayıcı DevTools'u kullanın:

Web sitesini aç
Hedeflemek istediğiniz öğeyi sağ tıklayın
"İncele" veya "Elemanı Denetle"yi seçin
DevTools'ta HTML öğesine sağ tıklayın
Seçiciyi kopyalayın (CSS Seçici veya kendinizinkini oluşturun)

3. Adım: Yapılandırmaya Kural Ekleme

dom-rules.ts dosyasını açın ve kurallarınızı ekleyin:

export const CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP: Record<string, string[]> = {
  // ... existing rules ...
  'your-website.com': [
    '.header-navigation',
    '#sidebar-menu',
    '.code-block',
  ],
}

4. Adım: Kurallarınızı Test Edin

Geliştirme sunucusunu çalıştırın:
```
pnpm dev
```
Web sitesine gidin
Öğelerin doğru şekilde işlendiğini doğrulayın
Seçicileri gerektiği gibi ayarlayın

En İyi Uygulamalar

Seçici Özgüllüğü

Yalnızca amaçlanan öğeleri hedefleyecek kadar spesifik olun
Sadece * veya div gibi aşırı geniş seçicilerden kaçının
Sınıf adlarını, kimliklerini veya öğe kombinasyonlarını kullanın

Performansla İlgili Hususlar

Seçici sayısını makul tutun
Performansın kabul edilebilir olduğundan emin olmak için gerçek sayfalarda test yapın
Daha basit olanlar işe yaradığında karmaşık alt seçicilerden kaçının

Sürdürülebilirlik

İlgili seçicileri bir arada gruplayın
Kurallara neden ihtiyaç duyulduğunu açıklayan yorumlar ekleyin
Mümkün olduğunda anlamlı seçici adları kullanın

Ortak Desenler

Gezinme Öğelerini Hariç Tutma

'example.com': [
  'nav *',
  'header *',
  '.navigation',
]

Etkileşimli Kullanıcı Arayüzü Hariç

'example.com': [
  'button',
  'input',
  'select',
  '.modal',
  '.dropdown',
]

Teknik İçerik Hariç

'example.com': [
  'pre',
  'code',
  '.code-block',
  '.terminal',
]

Genel DOM Kuralları

Read Frog, özel kurallara ek olarak tüm web siteleri için geçerli olan çeşitli genel kurallara sahiptir:

Engelleme Etiketlerini Zorla

Her zaman blok düzeyinde ele alınan öğeler:

export const FORCE_BLOCK_TAGS = new Set([
  'BODY',
  'H1',
  'H2',
  'H3',
  'H4',
  'H5',
  'H6',
  'BR',
  'FORM',
  'SELECT',
  'BUTTON',
  'LABEL',
  'UL',
  'OL',
  'LI',
  'BLOCKQUOTE',
  'PRE',
  'ARTICLE',
  'SECTION',
  'FIGURE',
  'FIGCAPTION',
  'HEADER',
  'FOOTER',
  'MAIN',
  'NAV',
])

Yürümeyin ve Çevirmeyin Etiketler

Çeviri için hiçbir zaman geçilmeyen öğeler:

export const DONT_WALK_AND_TRANSLATE_TAGS = new Set([
  'HEAD',
  'TITLE',
  'HR',
  'INPUT',
  'TEXTAREA',
  'IMG',
  'VIDEO',
  'AUDIO',
  'CANVAS',
  'SOURCE',
  'TRACK',
  'META',
  'SCRIPT',
  'NOSCRIPT',
  'STYLE',
  'LINK',
  'PRE',
  'svg',
  ...MATH_TAGS,
])

Sorun giderme

Kurallar Çalışmıyor

Alan adının yazılışını kontrol edin - Alanın tam olarak eşleştiğinden emin olun
Seçici sözdizimini doğrulayın - Seçicileri tarayıcı DevTools konsolunda test edin
Önbelleği temizle - Uzantıyı yeniden yükleyin ve sayfayı yenileyin
Seçicinin özgüllüğünü kontrol edin - Öğe daha spesifik bir kuralla eşleştirilebilir

Hala Çevrilen Öğeler

Öğenin, hariç tutulan bir öğenin çocuğu olup olmadığını kontrol edin
Seçicinin doğru öğeleri hedeflediğini doğrulayın
Sayfa yüklendikten sonra yüklenen dinamik öğeleri arayın

Çeviri Son Dakika Sayfa Düzeni

Zorla engelleme kurallarını dikkatli kullanın
Aynı web sitesinin birden fazla sayfasında test yapın
Zorunlu blok yerine !translate kurallarını kullanmayı düşünün

Özel Kurallara Katkıda Bulunma

Başkalarına fayda sağlayacak kurallar oluşturduysanız bunlara katkıda bulunmayı düşünün:

Birden fazla sayfada kapsamlı bir şekilde test edin
Kurallara neden ihtiyaç duyulduğunu belgeleyin
Değişikliklerinizi içeren bir Çekme İsteği gönderin
Contribution Guidelines'ı takip edin

Değişikliklerin gönderilmesiyle ilgili daha fazla ayrıntı için Code Contribution Guide'a bakın.

Özel DOM Kuralları

On this page