Reglas personalizadas DOM

Configure reglas DOM personalizadas para controlar el comportamiento de traducción en sitios web específicos

Descripción general

Read Frog le permite definir reglas DOM personalizadas para controlar cómo se traducen los elementos en sitios web específicos. Estas reglas se definen en dom-rules.ts y admiten dos comportamientos principales:

Forzar que los elementos no se traduzcan - Omitir la traducción de elementos específicos
Forzar traducción de bloques: hacer que los elementos en línea se traduzcan como elementos de bloque (con saltos de línea)

Ubicación del archivo de configuración

Las reglas personalizadas se definen en extension repository:

src/utils/constants/dom-rules.ts

Tipos de reglas disponibles

1. Selectores de elementos personalizados sin entrar

Utilice CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP para evitar la traducción de elementos específicos en ciertos dominios.

Sintaxis:

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

Ejemplo:

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 *',
  ],
}

Casos de uso:

Saltar menús de navegación y encabezados
Excluir elementos interactivos de la interfaz de usuario
Evitar la traducción de editores de código o contenido técnico.
Evite traducir secciones de metadatos

2. Selectores de traducción de bloques forzados personalizados

Utilice CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP para forzar que los elementos en línea se traduzcan como elementos de bloque (con saltos de línea).

Sintaxis:

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

Ejemplo:

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

Casos de uso:

Forzar que los mensajes de confirmación aparezcan en líneas separadas
Asegúrese de que los elementos de la lista se traduzcan individualmente
Mejore la legibilidad dividiendo el contenido denso en línea

Cómo agregar reglas personalizadas

Paso 1: identificar el dominio del sitio web

Utilice el dominio exacto tal como aparece en la barra de direcciones del navegador:

Utilice 'example.com' para https://example.com
Utilice 'www.example.com' para https://www.example.com

Paso 2: buscar selectores de elementos

Utilice DevTools del navegador para encontrar selectores CSS:

abrir el sitio web
Haga clic derecho en el elemento al que desea apuntar
Seleccione "Inspeccionar" o "Inspeccionar elemento"
Haga clic derecho en el elemento HTML en DevTools
Copie el selector (CSS Selector o cree el suyo propio)

Paso 3: agregar reglas a la configuración

Abra dom-rules.ts y agregue sus reglas:

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

Paso 4: prueba tus reglas

Ejecute el servidor de desarrollo:
```
pnpm dev
```
Navegar al sitio web
Verificar que los elementos se manejan correctamente
Ajuste los selectores según sea necesario

Mejores prácticas

Especificidad del selector

Sea lo suficientemente específico para centrarse únicamente en los elementos previstos.
Evite selectores demasiado amplios como * o div solos
Utilice nombres de clases, ID o combinaciones de elementos

Consideraciones de rendimiento

Mantenga el número de selectores razonable
Pruebe en páginas reales para garantizar que el rendimiento sea aceptable
Evite selectores descendientes complejos cuando funcionan los más simples

Mantenibilidad

Agrupar selectores relacionados
Agregue comentarios que expliquen por qué se necesitan reglas
Utilice nombres de selector significativos cuando sea posible

Patrones comunes

Excluyendo elementos de navegación

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

Excluyendo la interfaz de usuario interactiva

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

Excluyendo contenido técnico

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

Reglas globales DOM

Además de las reglas personalizadas, Read Frog tiene varias reglas globales que se aplican a todos los sitios web:

Etiquetas de bloqueo forzado

Elementos que siempre se tratan a nivel de bloque:

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',
])

No camines y traduzcas Tags

Elementos que nunca se recorren para su traducción:

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,
])

Solución de problemas

Las reglas no funcionan

Revise la ortografía del dominio - Asegúrese de que el dominio coincida exactamente
Verificar la sintaxis del selector: probar los selectores en la consola DevTools del navegador
Borrar caché: recarga la extensión y actualiza la página
Compruebe la especificidad del selector: el elemento puede coincidir con una regla más específica

Elementos aún en traducción

Compruebe si el elemento es hijo de un elemento excluido
Verifique que el selector apunte a los elementos correctos
Busque elementos dinámicos cargados después de cargar la página

Diseño de página de ruptura de traducción

Utilice las reglas de bloqueo forzado con moderación
Pruebe en varias páginas del mismo sitio web
Considere usar reglas !translate en lugar de forzar el bloqueo

Contribuir con reglas personalizadas

Si ha creado reglas que benefician a otros, considere contribuir con ellas:

Pruebe minuciosamente en varias páginas
Documentar por qué se necesitan las reglas
Envíe una solicitud de extracción con sus cambios
Sigue el Contribution Guidelines

Consulte el Code Contribution Guide para obtener más detalles sobre cómo enviar cambios.

Reglas personalizadas DOM

On this page