사용자 정의 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 *',
  ],
}

사용 사례:

탐색 메뉴 및 헤더 건너뛰기
대화형 UI 요소 제외
코드 편집기 또는 기술 콘텐츠의 번역 방지
메타데이터 섹션 번역 방지

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단계: 웹사이트 도메인 식별

브라우저의 주소 표시줄에 나타나는 정확한 도메인을 사용하세요.

https://example.com에는 'example.com'을 사용하세요.
https://www.example.com에는 'www.example.com'을 사용하세요.

2단계: 요소 선택기 찾기

브라우저 DevTools를 사용하여 CSS 선택기를 찾습니다.

웹사이트를 열어보세요
타겟팅하려는 요소를 마우스 오른쪽 버튼으로 클릭하세요.
"검사" 또는 "요소 검사"를 선택하세요.
DevTools에서 HTML 요소를 마우스 오른쪽 버튼으로 클릭하세요.
선택기 복사(CSS 선택기 또는 직접 만들기)

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과 같은 지나치게 광범위한 선택자를 피하세요
클래스 이름, ID 또는 요소 조합을 사용하세요.

성능 고려 사항

선택자의 수를 합리적으로 유지하십시오
성능이 허용 가능한지 실제 페이지에서 테스트하십시오.
간단한 하위 선택자가 작동하는 경우 복잡한 하위 선택자를 피하세요.

유지 관리성

관련 선택자를 그룹화
규칙이 필요한 이유를 설명하는 주석을 추가하세요.
가능하면 의미 있는 선택기 이름을 사용하세요.

일반적인 패턴

탐색 요소 제외

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

대화형 UI 제외

'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 규칙 사용을 고려하세요.

사용자 정의 규칙 기여

다른 사람에게 도움이 되는 규칙을 만들었다면 이를 기여해 보세요.

여러 페이지에서 철저하게 테스트
규칙이 필요한 이유를 문서화하세요.
변경 사항을 포함하여 Pull Request 제출
Contribution Guidelines을 따르세요

변경 사항 제출에 대한 자세한 내용은 Code Contribution Guide을 참조하세요.

사용자 정의 DOM 규칙

On this page