Пользовательские правила DOM

Настройте собственные правила DOM для управления поведением перевода на определенных веб-сайтах.

Обзор

Read Frog позволяет вам определять собственные правила DOM для управления переводом элементов на определенных веб-сайтах. Эти правила определены в dom-rules.ts и поддерживают два основных варианта поведения:

Не переводить элементы – пропустить перевод определенных элементов.
Принудительный блочный перевод — заставить строчные элементы переводиться как блочные (с разрывами строк).

Расположение файла конфигурации

Пользовательские правила определены в файле extension repository:

src/utils/constants/dom-rules.ts

Доступные типы правил

1. Пользовательские «Не заходите в селекторы элементов»

Используйте CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP, чтобы предотвратить перевод определенных элементов в определенных доменах.

Синтаксис:

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

Пример:

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

Примеры использования:

Пропустить навигационные меню и заголовки
Исключить интерактивные элементы пользовательского интерфейса
Запретить перевод редакторов кода или технического контента
Избегайте перевода разделов метаданных

2. Пользовательские селекторы принудительного перевода блоков

Используйте CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP, чтобы принудительно преобразовать строчные элементы в блочные (с разрывами строк).

Синтаксис:

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

Пример:

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

Примеры использования:

Принудительно отображать сообщения о фиксации в отдельных строках
Убедитесь, что элементы списка переведены индивидуально
Улучшите читаемость, разбивая плотный встроенный контент.

Как добавить собственные правила

Шаг 1. Определите домен веб-сайта

Используйте именно тот домен, который отображается в адресной строке браузера:

Используйте 'example.com' для https://example.com.
Используйте 'www.example.com' для https://www.example.com.

Шаг 2. Найдите селекторы элементов

Используйте DevTools браузера, чтобы найти селекторы CSS:

Открыть сайт
Щелкните правой кнопкой мыши элемент, на который вы хотите нацелиться.
Выберите «Проверить» или «Проверить элемент».
Щелкните правой кнопкой мыши элемент HTML в DevTools.
Скопируйте селектор (CSS Selector или создайте свой собственный)

Шаг 3. Добавьте правила в конфигурацию

Откройте dom-rules.ts и добавьте свои правила:

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

Шаг 4. Проверьте свои правила

Запустите сервер разработки:
```
pnpm dev
```
Перейдите на сайт
Убедитесь, что элементы обрабатываются правильно
Отрегулируйте селекторы по мере необходимости

Лучшие практики

Специфика селектора

Будьте достаточно конкретны, чтобы ориентироваться только на нужные элементы.
Избегайте слишком широких селекторов, таких как * или div.
Используйте имена классов, идентификаторы или комбинации элементов.

Вопросы производительности

Сохраняйте разумное количество селекторов
Протестируйте на реальных страницах, чтобы убедиться в приемлемости производительности.
Избегайте сложных селекторов потомков, когда работают более простые.

Ремонтопригодность

Сгруппируйте связанные селекторы вместе
Добавляйте комментарии, объясняющие, зачем нужны правила.
По возможности используйте осмысленные имена селекторов.

Общие шаблоны

Исключение элементов навигации

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

Исключая интерактивный интерфейс

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

Исключая технический контент

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

Глобальные правила DOM

Помимо пользовательских правил, Read Frog имеет несколько глобальных правил, которые применяются ко всем веб-сайтам:

Теги принудительного блока

Элементы, которые всегда рассматриваются как блочные:

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

Не ходите и не переводите теги

Элементы, которые никогда не обрабатываются для перевода:

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

Устранение неполадок

Правила не работают

Проверьте правописание домена – убедитесь, что домен точно совпадает.
Проверка синтаксиса селектора – проверка селекторов в консоли DevTools браузера.
Очистить кеш – перезагрузите расширение и обновите страницу.
Проверьте спецификацию селектора – элементу может соответствовать более конкретное правило.

Элементы все еще переводятся

Проверьте, является ли элемент дочерним элементом исключенного элемента
Убедитесь, что селектор нацелен на правильные элементы
Ищите динамические элементы, загружаемые после загрузки страницы.

Разрыв макета страницы перевода

Используйте правила принудительной блокировки экономно
Тестируйте на нескольких страницах одного и того же сайта.
Рассмотрите возможность использования правил !translate вместо принудительной блокировки.

Добавление пользовательских правил

Если вы создали правила, которые приносят пользу другим, рассмотрите возможность их использования:

Тщательно протестируйте на нескольких страницах
Документируйте, почему нужны правила
Отправьте запрос на включение с вашими изменениями
Следуйте Contribution Guidelines

Дополнительную информацию об отправке изменений см. в разделе Code Contribution Guide.

Пользовательские правила DOM

On this page