Quy tắc DOM tùy chỉnh

Định cấu hình quy tắc DOM tùy chỉnh để kiểm soát hành vi dịch trên các trang web cụ thể

Tổng quan

Read Frog cho phép bạn xác định các quy tắc DOM tùy chỉnh để kiểm soát cách dịch các thành phần trên các trang web cụ thể. Các quy tắc này được xác định trong dom-rules.ts và hỗ trợ hai hành vi chính:

Bắt buộc các thành phần không được dịch - Bỏ qua bản dịch đối với các thành phần cụ thể
Buộc dịch khối - Làm cho các phần tử nội tuyến dịch thành các phần tử khối (có ngắt dòng)

Vị trí tệp cấu hình

Các quy tắc tùy chỉnh được xác định trong extension repository:

src/utils/constants/dom-rules.ts

Các loại quy tắc có sẵn

1. Tùy chỉnh Đừng đi vào bộ chọn phần tử

Sử dụng CUSTOM_DONT_WALK_INTO_ELEMENT_SELECTOR_MAP để ngăn việc dịch các phần tử cụ thể trên một số miền nhất định.

Cú pháp:

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

Ví dụ:

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

Trường hợp sử dụng:

Bỏ qua menu điều hướng và tiêu đề
Loại trừ các thành phần UI tương tác
Ngăn chặn việc dịch các trình soạn thảo mã hoặc nội dung kỹ thuật
Tránh dịch các phần siêu dữ liệu

2. Bộ chọn dịch khối lực tùy chỉnh

Sử dụng CUSTOM_FORCE_BLOCK_TRANSLATION_SELECTOR_MAP để buộc các phần tử nội tuyến được dịch thành phần tử khối (có ngắt dòng).

Cú pháp:

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

Ví dụ:

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

Trường hợp sử dụng:

Buộc thông báo cam kết xuất hiện trên các dòng riêng biệt
Đảm bảo các mục trong danh sách được dịch riêng lẻ
Cải thiện khả năng đọc bằng cách chia nhỏ nội dung nội tuyến dày đặc

Cách thêm quy tắc tùy chỉnh

Bước 1: Xác định tên miền trang web

Sử dụng tên miền chính xác như xuất hiện trên thanh địa chỉ của trình duyệt:

Sử dụng 'example.com' cho https://example.com
Sử dụng 'www.example.com' cho https://www.example.com

Bước 2: Tìm bộ chọn phần tử

Sử dụng DevTools của trình duyệt để tìm bộ chọn CSS:

Mở trang web
Nhấp chuột phải vào phần tử bạn muốn nhắm mục tiêu
Chọn "Kiểm tra" hoặc "Kiểm tra phần tử"
Nhấp chuột phải vào phần tử HTML trong DevTools
Sao chép bộ chọn (CSS Bộ chọn hoặc tạo bộ chọn của riêng bạn)

Bước 3: Thêm quy tắc vào cấu hình

Mở dom-rules.ts và thêm quy tắc của bạn:

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

Bước 4: Kiểm tra quy tắc của bạn

Chạy máy chủ phát triển:
```
pnpm dev
```
Điều hướng đến trang web
Xác minh rằng các phần tử được xử lý chính xác
Điều chỉnh bộ chọn khi cần thiết

Thực tiễn tốt nhất

Tính đặc hiệu của bộ chọn

Đủ cụ thể để chỉ nhắm mục tiêu các yếu tố mong muốn
Tránh các bộ chọn quá rộng như * hoặc div
Sử dụng tên lớp, ID hoặc kết hợp thành phần

Cân nhắc về hiệu suất

Giữ số lượng bộ chọn hợp lý
Kiểm tra trên các trang thực tế để đảm bảo hiệu suất có thể chấp nhận được
Tránh các bộ chọn con phức tạp khi các bộ chọn đơn giản hơn hoạt động

Khả năng bảo trì

Nhóm các bộ chọn liên quan lại với nhau
Thêm nhận xét giải thích tại sao cần có quy tắc
Sử dụng tên bộ chọn có ý nghĩa khi có thể

Các mẫu chung

Loại trừ các phần tử điều hướng

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

Loại trừ giao diện người dùng tương tác

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

Loại trừ nội dung kỹ thuật

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

Quy tắc DOM toàn cầu

Ngoài các quy tắc tùy chỉnh, Read Frog còn có một số quy tắc chung áp dụng cho tất cả các trang web:

Buộc chặn thẻ

Các phần tử luôn được coi là cấp khối:

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

Đừng đi bộ và dịch thẻ

Các phần tử không bao giờ được duyệt qua để dịch:

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

Khắc phục sự cố

Quy tắc không hoạt động

Kiểm tra chính tả tên miền - Đảm bảo tên miền khớp chính xác
Xác minh cú pháp bộ chọn - Kiểm tra bộ chọn trong bảng điều khiển DevTools của trình duyệt
Xóa bộ nhớ cache - Tải lại tiện ích mở rộng và làm mới trang
Kiểm tra tính đặc hiệu của bộ chọn - Phần tử có thể được so khớp theo quy tắc cụ thể hơn

Các yếu tố vẫn đang được dịch

Kiểm tra xem phần tử có phải là con của phần tử bị loại trừ không
Xác minh bộ chọn nhắm mục tiêu các phần tử chính xác
Tìm kiếm các phần tử động được tải sau khi tải trang

Bố cục trang dịch thuật

Sử dụng quy tắc chặn lực lượng một cách tiết kiệm
Kiểm tra trên nhiều trang của cùng một trang web
Cân nhắc sử dụng quy tắc !translate thay vì chặn lực lượng

Đóng góp quy tắc tùy chỉnh

Nếu bạn đã tạo các quy tắc có lợi cho người khác, hãy cân nhắc việc đóng góp chúng:

Kiểm tra kỹ lưỡng trên nhiều trang
Tài liệu tại sao các quy tắc là cần thiết
Gửi yêu cầu kéo với những thay đổi của bạn
Hãy theo dõi Contribution Guidelines

Xem Code Contribution Guide để biết thêm chi tiết về việc gửi thay đổi.

Quy tắc DOM tùy chỉnh

On this page