고급 사용자 정의 옵션

고급 사용자를 위해 UI에서 편집할 수 없는 확장 구성 페이지 -> 개발자 설정 -> 사용자 구성에서 더 맞춤화된 구성을 편집할 수 있습니다. 매개변수에 대한 자세한 내용은 마지막 메모를 참조하세요. 현재 내장된 config는 여기에서 확인할 수 있습니다.

사용자 규칙

Rules를 사용하면 특정 웹사이트의 구성을 사용자 정의하여 번역할 콘텐츠를 결정하거나 페이지 스타일을 조정할 수 있습니다.

[
  {
    "matches": "www.google.com",
    "selectors": [".title"]
  },
  {
    "matches": "*.twitter.com",
    "selectors": [".text"],
    "excludeSelectors": ["nav", " footer"]
  }
]

matches를 사용하여 해당 웹사이트와 일치시킵니다. 와일드카드를 사용할 수 있습니다. 예: *.google.com,www.google.com/test/*,file://*.

selectors를 사용하여 스마트 번역 범위를 재정의하고 해당 선택자와 일치하는 요소만 번역합니다.

excludeSelectors를 사용하여 위치를 번역하지 않고 요소를 제외합니다.

additional 선택자 계열을 사용하여 지능형 번역을 기반으로 번역 범위를 늘리거나 줄일 수 있습니다.

[
  {
    "matches": "www.google.com",
    "additionalSelectors": [],
    "additionalExcludeSelectors": []
  }
]

요소를 분리하지 않고 전체로 취급하여 영역을 번역하려면 atomicBlockSelectors 선택자를 사용할 수 있습니다. 예를 들어, 인스타그램 프로필. atomicBlockSelectors를 사용하려면 먼저 selectors로 선택한 후 사용해야 합니다.

{
  "matches": "https://www.instagram.com/*",
  "selectors": [
    "div._aa_c h1",
    "li._acaz div[role=\"menuitem\"]"
  ]
  "atomicBlockSelectors": [
    "div. ._aa_c h1",
    "li._acaz div[role=\"menuitem\"]"
  ]
}

번역 결과가 페이지 불일치, 텍스트 중첩 및 기타 경계 사례를 초래하는 경우 globalStyles를 사용하여 페이지 스타일을 조정하여 수정할 수 있습니다. 예를 들어, 유튜브 헤더는 원래 페이지의 최대 높이를 제거하는 데 사용됩니다.

{
  "matches": "www.google.com",
  "globalStyles": { ".title": "max-height:unset;" }
}

사용자 규칙 통합 개선

0.7.4+ 지원. 번역되지 않은 영역을 건너뛰는 예를 들어 보겠습니다.

{
  "matches": "https://www.elektrotechnik.rwth-aachen.de/*",
  "additionalExcludeSelectors.remove": [".notranslate", "[translate=no]"]
}

추가 및 제거 작업은 기본적으로 제공된 규칙을 수정하며, 이전과 같이 전체를 대체할 필요는 없습니다.

주입된 CSS

주입된 CSS를 사용하면 사용자 정의 웹 스타일을 전역적으로 주입할 수 있습니다. Rules의 translationClasses와 함께 사용할 수 있습니다.

".immersive-translate-target-wrapper img { width: 16px; height: 16px }"

또한 사이트를 보다 개인화된 방식으로 스타일링할 수 있으며, 일반 웹 스타일 관리자처럼 사용할 수 있습니다. (광고를 제거하기 위해 display:none을 활용할 수도 있습니다)

.title {
  color: red;
}

사용자 구성

구성을 통해 이 플러그인의 구성을 사용자 정의할 수 있으며, 번역 서비스, 언어별 번역 옵션 등을 포함합니다.

{
  "translationService": "tencent",
  "translationServices": {
    "tencent": {
      "secretId": "xxx",
      "secretKey": "xxx",
      "matches": ["*.twitter.com"]
    }
  } ,
  "translationUrlPattern": {
    "excludeMatches": ["www.google.com"]
  },
  "translationLanguagePattern": {
    "matches": ["en"]
  },
  "translationTheme". "none",
  "translationThemePatterns": {
    "underline": {
      "matches": ["discord.com"]
    }
  },
  "generalRule": {
    "_comment": "",
    "normalizeBody": "",
    " injectedCss": [],
    "additionalInjectedCss": [],
    "wrapperPrefix": "smart",
    "wrapperSuffix": "smart",
    "isPdf": false,
    "isTransformPreTagNewLine ": false,
    "urlChangeDelay": 20,
    "isShowUserscriptPagePopup": true,
    "observeUrlChange": true,
    "paragraphMinTextCount": 8,
    " paragraphMinWordCount": 2,
    "blockMinTextCount": 32,
    "blockMinWordCount": 5,
    "containerMinTextCount": 18,
    "lineBreakMaxTextCount": 0,
    " globalAttributes": {},
    "globalStyles": {},
    "selectors": [],
    "preWhitespaceDetectedTags": ["DIV", "SPAN"],
    "stayOriginalSelectors": [],
    " additionalSelectors": [],
    "atomicBlockTags": [],
    "excludeSelectors": [],
    "additionalExcludeSelectors": [],
    "translationClasses": [],
    " atomicBlockSelectors": [],
    "excludeTags": [],
    "metaTags": ["META", "SCRIPT", "STYLE", "NOSCRIPT"],
    "additionalExcludeTags": [],
    " stayOriginalTags": ["CODE", "TT", "IMG", "SUP"],
    "additionalStayOriginalTags": [],
    "inlineTags": [],
    "additionalInlineTags": [],
    " extraInlineSelectors": [],
    "additionalInlineSelectors": [],
    "extraBlockSelectors": [],
    "allBlockTags": [],
    "pdfNewParagraphLineHeight": 2.4 ,
    "pdfNewParagraphIndent": 1.2,
    "pdfNewParagraphIndentRightIndentPx": 130,
    "fingerCountToToggleTranslagePageWhenTouching": 4
  },
  "rules": [
    {
      "matches": "www.google.com",
      "selectors": [".class"]
    }
  ]
}

rules의 규칙 필드는 generalRule의 모든 필드를 사용할 수 있습니다. rules는 가장 높은 우선순위를 가지며, 특정 사이트에 대한 특정 rule이 일치할 때 generalRule과 해당 rule의 규칙을 병합합니다.

구성의 일반적인 필드를 소개합니다.

팝업 패널에서 구성되지 않은 번역 서비스를 표시하지 않기

"showUnconfiguredTranslationServiceInPopup": false

번역 서비스 구성

translationService를 사용하여 기본 번역 엔진을 선택합니다. 현재 지원되는 엔진은 다음과 같습니다.

| "tencent"
| "google"
| "deepl"
| "baidu"
| "volc"
| "youdao"
| "caiyun"
| "openl"
| "bing"
| "transmart"

translationServices를 사용하여 각 번역 서비스의 apikey를 구성합니다. 서비스 제공자마다 다른 매개변수가 필요하며, 해당 웹사이트의 개발자 센터에서 API 키를 요청할 수 있습니다.

예를 들어, Tencent Translator의 경우 secretId, secretKey를 구성해야 합니다. 매월 500만 무료 문자를 제공하는 API 키를 신청하려면 Tencent Cloud로 이동하세요. 신청 절차는 여기를 참조하세요.

"translationServices": {
  "tencent": {
    "secretId": "xxx",
    "secretKey": "xxx",
    "matches":["*.twitter.com"],
    "limit": 3,
    "apiUrl":"",
    " maxTextGroupLengthPerRequest": 25,
    "maxTextLengthPerRequest": 1800
  }
}

matches 필드는 특정 웹사이트에 대해 이 번역 서비스를 사용합니다.

limit 필드는 이 번역 서비스에 대한 초당 최대 요청 수를 지정합니다(일부 서비스는 초당 최대 요청 수를 제한합니다).

maxTextGroupLengthPerRequest 필드는 요청당 최대 단락 수를 지정합니다.

maxTextLengthPerRequest 필드는 요청당 최대 문자 수를 지정합니다.

apiUrl은 번역 인터페이스의 주소를 사용자 정의할 수 있게 합니다.

특정 웹사이트 항상 번역

translationUrlPattern은 항상 번역되는 사이트와 번역되지 않는 사이트를 구성합니다.

• matches 구성은 항상 사이트를 번역합니다.
• excludeMatches 구성은 번역되지 않는 사이트를 설정합니다.

구성 값은 도메인 이름이나 *가 포함된 URL일 수 있습니다. 예: www.google.com/mail/*

"translationUrlPattern": {
    "matches": ["stackoverflow.com"]
    "excludeMatches": ["www.google.com/mail/*"]
}

특정 언어 항상 번역

translationLanguagePattern은 항상 번역되는 언어와 번역되지 않는 언어를 구성합니다.

• matches는 항상 번역되는 언어를 구성합니다. 예: en,
• excludeMatches는 번역되지 않는 언어를 구성합니다.

번역 표시 형식

translationTheme는 번역의 표시 형식이며, 현재 다음 스타일을 지원합니다:

| "none"
| "dashed"
| "dotted"
| "underline"
| "mask"
| "paper"
| "highlight"
| "blockquote"
| "weakening"
| "italic"
| "bold"
| "thinDashed".

해당 중국어 이름:

{
  "none": "none",
  "dashed": "점선 밑줄",
  "dotted": "점선 밑줄",
  "underline": "직선 밑줄",
  "mask": "흐림 효과",
  "paper": "흰 종이 그림자 효과",
  "highlight": "강조",
  "blockquote": "인용 스타일",
  "weakening": "약화",
  "italic": "이탤릭체",
  "bold": "굵게",
  "thinDashed": "얇은 점선 밑줄"
}

translationThemePatterns를 사용하면 다른 웹사이트에 대해 다른 번역 스타일을 구성할 수 있습니다.

"translationThemePatterns": {
  "underline": {
    "matches": ["discord.com"]
  }
}

Class gpt 페이지 스트림 메시지 번역

{
  "matches": ["chat.openai.com"],
  "excludeSelectors": [".markdown *"],
  "aiRule": {
    "streamingSelector": ".result-streaming.markdown ",
    "messageWrapperSelector": ".markdown",
    "streamingChange": true
  }
}

규칙

rules는 특정 사이트에 대한 규칙을 구성할 수 있는 배열 객체로, 예를 들어 트위터가 특정 지역의 일부만 번역하도록 할 수 있습니다:

{
  "rules": [
    {
      "id": "twitter",
      "matches": ["twitter.com", "mobile.twitter.com", "tweetdeck.twitter.com"],
      "selectors": [
        "[data-testid=' tweetText']",
        ".tweet-text",
        ".js-quoted-tweet-text",
        "[data-testid='card.layoutSmall.detail'] > div:nth-child(2)",
        "[data-testid=' developerBuiltCardContainer'] > div:nth-child(2)",
        "[data-testid='card.layoutLarge.detail'] > div:nth-child(2)"
      ],
      "extraInlineSelectors": ["[data-testid=\"tweetText\"] div"]
    }
  ]
}

현재 내장된 rules는 여기에서 확인할 수 있습니다.

아래는 중요한 필드를 선택하여 설명한 것입니다:

export interface Rule {
  // 웹사이트와 일치
  id?: string; // 각 적응 규칙에는 고유한 id가 있으며, 사용자가 이 규칙을 변경하여 재사용하려면 해당 id를 자신의 규칙에 추가해야 합니다.
  matches?: string | string[]; // 이 규칙은 여기서 웹사이트와만 일치합니다. 이 규칙은 여기서 사이트와만 일치합니다.
  excludeMatches?: string | string[]; // 특정 사이트를 제외합니다.
  selectorMatches?: string | string[]; // 모든 URL을 지정하지 않고 선택자와 일치합니다.
  excludeSelectorMatches?: string | string[]; // 위와 같이 규칙을 제외합니다.

  // 번역 범위 지정
  selectors?: string | string[]; // 일치하는 요소만 번역
  excludeSelectors?: string | string[]; // 요소 제외, 일치하는 항목 번역 안 함
  excludeTags?: string | string[]; // 태그 제외, 일치하는 태그 번역 안 함

  // 번역 범위를 덮어쓰지 않고 추가
  additionalSelectors?: string | string[]; // 번역 범위 추가. 지능적으로 번역된 영역에 번역 위치를 추가합니다.
  additionalExcludeSelectors?: string | string[]; // 제외 요소를 추가하여 스마트 번역이 특정 위치를 번역하지 않도록 합니다.
  additionalExcludeTags?: string | string[]; // 추가 제외 태그

  // 원래 상태 유지
  stayOriginalSelectors?: string | string[]; // 일치하는 요소는 원래 상태로 유지됩니다. 포럼 사이트 태그에 일반적으로 사용됩니다.
  stayOriginalTags?: string | string[]; // 일치하는 태그는 원래 상태로 유지됩니다. 예: `code`

  // 지역 번역
  atomicBlockSelectors?: string | string[]; // 지역 선택자, 일치하는 요소는 전체로 취급되며, 섹션으로 번역되지 않습니다.
  atomicBlockTags?: string | string[]; // 지역 태그 선택자, 위와 동일

  // 블록 또는 인라인
  extraBlockSelectors?: string | string[]; // 추가 선택자, 일치하는 요소는 블록 요소로 취급되며, 한 줄로 번역되지 않습니다.
  extraInlineSelectors?: string | string[]; // 인라인 요소로 사용될 추가 선택자.

  inlineTags?: string | string[]; // 일치하는 태그는 인라인 요소로 사용됩니다.
  preWhitespaceDetectedTags?: string | string[]; // 일치하는 태그는 자동으로 줄바꿈됩니다.

  // 번역 스타일
  translationClasses? string | string | string[]; // 번역에 추가 클래스를 추가합니다.

  // 전역 스타일
  globalStyles?: Record<string, string>; // 페이지 스타일을 수정합니다. 번역으로 인해 페이지가 엉망이 되는 경우 유용합니다. `
  globalAttributes?: Record<string, Record<string, string>>; // 페이지 요소의 속성을 수정합니다.

  // 내장 스타일
  injectedCss?: string | string[]; // CSS 스타일을 내장합니다.
  additionalInjectedCss?: string | string[]; // 스타일을 덮어쓰지 않고 추가 CSS 스타일을 추가합니다.

  // 컨텍스트
  wrapperPrefix?: string; // 번역 영역의 접두사로, 기본값은 스마트이며, 문자 수에 따라 줄바꿈 여부가 결정됩니다.
  wrapperSuffix?: string; // 번역 영역의 접미사

  // 번역을 래핑할 문자 수
  blockMinTextCount?: number; // 번역을 블록으로 래핑할 최소 문자 수, 그렇지 않으면 번역은 인라인 요소입니다.
  blockMinWordCount?: number; // 위와 동일. 항상 줄바꿈되도록 하려면 둘 다 0으로 설정할 수 있습니다.

  // 번역할 수 있는 콘텐츠의 최소 문자 수
  containerMinTextCount?: number; // 번역되기 전에 요소가 포함해야 할 최소 문자 수, 기본값은 18입니다.
  paragraphMinTextCount?: number; // 단락의 최소 문자 수, 콘텐츠가 포함해야 할 문자 수보다 큽니다. 그보다 큰 모든 것이 번역됩니다.
  paragraphMinWordCount?: number; // 원래 단락의 최소 단어 수

  // 긴 단락에 대한 강제 줄바꿈
  lineBreakMaxTextCount?: number; // 긴 단락을 번역할 때 강제로 줄바꿈할 단락의 최대 문자 수.

  // 번역을 시작할 시점.
  urlChangeDelay?: number; // 페이지에 들어간 후 번역을 지연할 밀리초 수. 페이지 초기화를 기다리기 위해 기본값은 250ms입니다.
  observeUrlChange?: boolean; // URL 주소가 변경되었을 때 감지하고 번역을 다시 시작합니다. 기본값은 true입니다.

  // 모바일
  isShowUserscriptPagePopup?: boolean; // 모바일 장치에서 페이지 팝업을 표시합니다. 기본값은 true입니다.
  fingerCountToToggleTranslagePageWhenTouching?: number; // 네 손가락이 터치할 때 번역을 전환합니다. 0, 2, 3, 4, 5로 설정할 수 있습니다.

  // AI 스트리밍 번역
  aiRule: {
    streamingSelector. string; // gpt 웹 페이지에서 번역 중인 요소를 표시하는 선택자
    messageWrapperSelector: string; // 메시지 본문 선택자
    streamingChange: boolean; // 클래스 gpt 웹 페이지 반복에 대해 메시지가 점진적으로 업데이트되는지 또는 전체적으로 업데이트되는지 여부. gpt는 점진적입니다.
  };
}

추가 설명

블록과 인라인의 차이점, 더 알고 싶다면 여기를 참조하세요.

• 블록 요소는 단일 라인을 차지하며, 여러 인접한 블록 요소는 각각 새로운 라인을 차지합니다.
• 인라인 요소는 단일 라인을 차지하지 않으며, 여러 인접한 인라인 요소는 같은 라인에 배열되며, 한 라인이 너무 많아질 때까지 새로운 라인을 만들지 않습니다.