Read Frog

カスタム DOM ルール

カスタム DOM ルールを構成して、特定の Web サイトでの翻訳動作を制御する

概要

Read Frog を使用すると、カスタム DOM ルールを定義して、特定の Web サイトで要素が翻訳される方法を制御できます。これらのルールは dom-rules.ts で定義され、次の 2 つの主要な動作をサポートします。

  1. 要素を強制的に翻訳しない - 特定の要素の翻訳をスキップします
  2. ブロック変換を強制する - インライン要素をブロック要素として変換します (改行あり)

設定ファイルの場所

カスタム ルールは 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: Web サイトのドメインを特定する

ブラウザのアドレス バーに表示されるとおりの正確なドメインを使用します。

  • https://example.com には 'example.com' を使用します
  • https://www.example.com には 'www.example.com' を使用します

ステップ 2: 要素セレクターを見つける

ブラウザーの DevTools を使用して CSS セレクターを見つけます。

  1. ウェブサイトを開く
  2. 対象とする要素を右クリックします
  3. 「検査」または「要素の検査」を選択します。
  4. DevTools で HTML 要素を右クリックします。
  5. セレクターをコピーします (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: ルールをテストする

  1. 開発サーバーを実行します。

    pnpm dev

  2. Web サイトに移動する

  3. 要素が正しく処理されていることを確認します

  4. 必要に応じてセレクターを調整します

ベストプラクティス

セレクターの特異性

  • 意図した要素のみをターゲットにするために十分に具体的である
  • * や 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 にはすべての Web サイトに適用されるいくつかのグローバル ルールがあります。

強制ブロックタグ

常にブロックレベルとして扱われる要素:

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

トラブルシューティング

ルールが機能しない

  1. ドメインのスペルを確認してください - ドメインが正確に一致していることを確認してください
  2. セレクターの構文を確認する - ブラウザーの DevTools コンソールでセレクターをテストする
  3. キャッシュをクリア - 拡張機能をリロードし、ページを更新します
  4. セレクターの特異性を確認してください - 要素はより具体的なルールと一致する可能性があります

まだ翻訳中の要素

  1. 要素が除外された要素の子であるかどうかを確認します
  2. セレクターが正しい要素をターゲットにしていることを確認します。
  3. ページの読み込み後に読み込まれた動的要素を探す

翻訳を中断するページレイアウト

  1. 強制ブロックルールは慎重に使用してください
  2. 同じ Web サイトの複数のページでテストする
  3. 強制ブロックの代わりに !translate ルールの使用を検討してください

カスタム ルールの提供

他の人に利益をもたらすルールを作成した場合は、そのルールに貢献することを検討してください。

  1. 複数のページで徹底的にテストする
  2. ルールが必要な理由を文書化する
  3. 変更を加えたプルリクエストを送信する
  4. Contribution Guidelines に従ってください

変更の送信の詳細については、Code Contribution Guide を参照してください。

On this page

概要設定ファイルの場所利用可能なルールの種類1. カスタムの要素セレクターに入らないようにする2. カスタム強制ブロック変換セレクターカスタムルールを追加する方法ステップ 1: Web サイトのドメインを特定するステップ 2: 要素セレクターを見つけるステップ 3: ルールを構成に追加するステップ 4: ルールをテストするベストプラクティスセレクターの特異性パフォーマンスに関する考慮事項保守性よくあるパターンナビゲーション要素の除外インタラクティブUIを除く技術的な内容を除くグローバル DOM ルール強制ブロックタグ歩きながらタグを翻訳しないでくださいトラブルシューティングルールが機能しないまだ翻訳中の要素翻訳を中断するページレイアウトカスタム ルールの提供