Passer au contenu principal

Options de personnalisation avancées

Vous pouvez modifier des configurations plus personnalisées dans la page de configuration étendue -> Paramètres développeur -> Config utilisateur qui ne sont pas modifiables dans l'interface utilisateur pour les utilisateurs avancés, voir la dernière note pour plus de détails sur les paramètres. Le config intégré actuel peut être trouvé ici.

Règles utilisateur​

Avec Rules, il est possible de personnaliser la configuration d'un site web particulier, en décidant quel contenu doit être traduit ou non, ou en ajustant le style des pages, etc.

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

Utilisez matches pour correspondre au site web correspondant. Les jokers sont autorisés, par exemple *.google.com, www.google.com/test/*, file://*.

L'utilisation de selectors remplace le champ de traduction intelligent, ne traduisant que les éléments correspondants à ce sélecteur.

Utilisez excludeSelectors pour exclure des éléments sans traduire la position.

Utilisez la famille de sélecteurs additional pour augmenter ou diminuer la portée de la traduction basée sur la traduction intelligente.

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

Si vous souhaitez traduire une région tout en traitant les éléments comme un tout et ne pas les séparer, vous pouvez utiliser le sélecteur atomicBlockSelectors. Par exemple, les profils Instagram. Notez que l'utilisation de atomicBlockSelectors nécessite de sélectionner avec selectors avant d'utiliser atomicBlockSelectors.

{
  "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\"]"
  ]
}

Si la traduction entraîne des pages mal alignées, du texte qui se chevauche et d'autres cas particuliers, vous pouvez utiliser globalStyles pour ajuster le style de la page afin de le corriger. Par exemple, l'en-tête de YouTube, qui est utilisé pour supprimer la hauteur maximale de la page d'origine.

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

Améliorations de la consolidation des règles utilisateur​

Support 0.7.4+. Prenons l'exemple de sauter la zone sans traduction

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

Les opérations d'ajout et de suppression modifient les règles fournies par défaut et n'ont pas besoin d'être remplacées dans leur intégralité, comme c'était le cas auparavant.

CSS injecté​

Le CSS injecté vous permet d'injecter des styles web personnalisés globalement. Peut être utilisé avec translationClasses de Rules.

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

Il est également possible de styliser le site de manière plus personnalisée, comme un gestionnaire de style web régulier. (même en utilisant display:none pour supprimer les publicités)

.title {
  color: red;
}

Config utilisateur​

Config vous permet de personnaliser la configuration de ce plugin, comme les services de traduction, les options de traduction spécifiques à une langue, etc.

{
  "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"]
    }
  ]
}

Les champs de règle dans rules peuvent utiliser tous les champs dans generalRule. Les rules ont la priorité la plus élevée, fusionnant le generalRule et les règles pour cette rule lorsqu'une rule particulière pour un site particulier est correspondue.

Présentation de certains des champs communs de Config.

Ne pas afficher les services de traduction non configurés dans le panneau contextuel​

"showUnconfiguredTranslationServiceInPopup": false

Configuration des services de traduction​

Utilisez translationService pour sélectionner le moteur de traduction par défaut, qui prend actuellement en charge :

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

Utilisez translationServices pour configurer l'apikey de chaque service de traduction, différents fournisseurs de services nécessitent différents paramètres, et leurs clés API peuvent être demandées dans le centre développeur de leurs sites respectifs.

Par exemple, pour Tencent Translator, vous devez configurer secretId, secretKey. Vous pouvez vous rendre sur Tencent Cloud pour demander une clé API avec 5 millions de caractères gratuits par mois. Référez-vous ici pour le processus de demande.

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

Champ matches, utilisant ce service de traduction pour un site web spécifique.

Le champ limit, qui spécifie le nombre maximum de requêtes par seconde pour ce service de traduction (certains services limitent le nombre maximum de requêtes par seconde).

Champ maxTextGroupLengthPerRequest, nombre maximum de paragraphes par requête

Champ maxTextLengthPerRequest, nombre maximum de caractères par requête

apiUrl vous permet de personnaliser l'adresse de l'interface de traduction.

Toujours traduire des sites web spécifiques​

translationUrlPattern Configure les sites qui sont toujours traduits, et les sites qui ne sont jamais traduits.

  • La configuration matches traduit toujours le site.
  • excludeMatches Configure les sites qui ne sont jamais traduits.

Les valeurs de configuration peuvent être des noms de domaine ou des URL avec *, par exemple : www.google.com/mail/*

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

Toujours traduire des langues spécifiques​

translationLanguagePattern, configure la langue qui est toujours traduite et la langue qui n'est jamais traduite.

  • matches Configure la langue qui est toujours traduite, par exemple en,
  • excludeMatches Configure les langues qui ne sont jamais traduites.

Format d'affichage de la traduction​

translationTheme est le format d'affichage de la traduction, et prend actuellement en charge les styles suivants :

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

Nom chinois correspondant :

{
  "none": "aucun",
  "dashed": "soulignement en pointillés",
  "dotted": "soulignement en pointillés",
  "underline": "soulignement en ligne droite",
  "mask": "effet de flou",
  "paper": "effet d'ombre de papier blanc",
  "highlight": "surlignage",
  "blockquote": "style de citation",
  "weakening": "affaiblissement",
  "italic": "italique",
  "bold": "gras",
  "thinDashed": "soulignement en pointillés fins"
}

translationThemePatterns vous permet de configurer différents styles de traduction pour différents sites web.

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

Traduction des messages en flux de la page Class gpt​

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

Règles​

rules est un objet tableau qui vous permet de configurer des règles pour des sites spéciaux, comme faire en sorte que Twitter ne traduise qu'une certaine partie d'une région :

{
  "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"]
    }
  ]
}

Les rules intégrées actuelles peuvent être trouvées ici.

Certains des champs importants sont sélectionnés ci-dessous pour illustration :

export interface Rule {
  // Correspondre au site web
  id?: string; // Chaque règle d'adaptation a son propre id, si les utilisateurs veulent réutiliser cette règle en plus de ce changement, ils doivent ajouter cet id correspondant à leur propre règle pour la réutiliser
  matches?: string | string[]; // Cette règle ne correspondra qu'au site web ici. Cette règle ne correspondra qu'aux sites ici.
  excludeMatches?: string | string[]; // Exclure des sites spécifiques.
  selectorMatches?: string | string[]; // Correspondre avec un sélecteur sans spécifier toutes les urls
  excludeSelectorMatches?: string | string[]; // Exclure les règles, comme ci-dessus.

  // Spécifier la portée des traductions
  selectors?: string | string[]; // Traduire uniquement les éléments qui correspondent
  excludeSelectors?: string | string[]; // Exclure les éléments, ne pas traduire les correspondances
  excludeTags?: string | string[]; // Exclure les balises, ne pas traduire les balises correspondantes

  // ajouter des plages de traduction au lieu de remplacer
  additionalSelectors?: string | string[]; // ajouter des plages de traduction. Ajouter des emplacements de traduction aux régions traduites intelligemment.
  additionalExcludeSelectors?: string | string[]; // Ajouter des éléments à exclure afin que la traduction intelligente ne traduise pas des emplacements spécifiques.
  additionalExcludeTags?: string | string[]; // Balises supplémentaires à exclure

  // Laisser tel quel
  stayOriginalSelectors?: string | string[]; // Les éléments correspondants resteront tels quels. Couramment utilisé dans les balises de site de forum.
  stayOriginalTags?: string | string[]; // Les balises correspondantes resteront telles quelles, par exemple `code`

  // Traductions régionales
  atomicBlockSelectors?: string | string[]; // Sélecteurs régionaux, les éléments correspondants seront traités comme un tout, non traduits en sections.
  atomicBlockTags?: string | string[]; // Sélecteurs de balises de zone, même chose que ci-dessus

  // Bloc ou en ligne
  extraBlockSelectors?: string | string[]; // Sélecteurs supplémentaires, les éléments correspondants seront traités comme des éléments de bloc, non traduits en une seule ligne.
  extraInlineSelectors?: string | string[]; // Sélecteurs supplémentaires qui seront utilisés comme éléments en ligne.

  inlineTags?: string | string[]; // La balise correspondante sera utilisée comme un élément en ligne
  preWhitespaceDetectedTags?: string | string[]; // La balise correspondante sera automatiquement enveloppée

  // Style de traduction
  translationClasses? string | string | string[]; // Ajouter des classes supplémentaires à la traduction

  // Styles globaux
  globalStyles?: Record<string, string>; // Modifier les styles de page, utile si la traduction cause un désordre dans la page. `
  globalAttributes?: Record<string, Record<string, string>>; // Modifier les attributs des éléments de la page

  // Styles intégrés
  injectedCss?: string | string[]; // Intégrer des styles CSS
  additionalInjectedCss?: string | string[]; // Styles CSS supplémentaires au lieu de les remplacer.

  // Contexte
  wrapperPrefix?: string; // Le préfixe de la zone de traduction, par défaut à smart, avec ou sans sauts de ligne selon le nombre de caractères.
  wrapperSuffix?: string; // Suffixe de la zone de traduction

  // Nombre de caractères pour envelopper la traduction
  blockMinTextCount?: number; // Nombre minimum de caractères pour envelopper la traduction en tant que bloc, sinon la traduction est un élément en ligne.
  blockMinWordCount?: number; // Même chose que ci-dessus. Si vous voulez qu'ils soient toujours à la ligne, vous pouvez mettre 0 dans les deux.

  // Nombre minimum de caractères pouvant être traduits à partir du contenu
  containerMinTextCount?: number; // Nombre minimum de caractères qu'un élément doit contenir avant d'être traduit, par défaut à 18
  paragraphMinTextCount?: number; // Nombre minimum de caractères pour le paragraphe, supérieur au nombre de caractères que le contenu doit contenir. nombre, tout ce qui est supérieur à cela sera traduit
  paragraphMinWordCount?: number; // Nombre minimum de mots dans le paragraphe d'origine

  // Sauts de ligne forcés pour les longs paragraphes
  lineBreakMaxTextCount?: number; // Nombre maximum de caractères dans le paragraphe à forcer à rompre lors de la traduction d'un long paragraphe.

  // Quand commencer la traduction.
  urlChangeDelay?: number; // Combien de millisecondes pour retarder la traduction après être entré dans la page. Pour attendre que la page s'initialise, par défaut à 250ms
  observeUrlChange?: boolean; // Détecter quand l'adresse url a changé et recommencer la traduction, vrai par défaut.

  // Mobile
  isShowUserscriptPagePopup?: boolean; // Afficher le popup de la page sur les appareils mobiles. fenêtre flottante, vrai par défaut.
  fingerCountToToggleTranslagePageWhenTouching?: number; // Traduit lorsque quatre doigts touchent, peut être réglé sur 0, 2, 3, 4, 5

  // Traductions en flux AI
  aiRule: {
    streamingSelector. string; // Sélecteur pour marquer l'élément en cours de traduction dans la page web gpt
    messageWrapperSelector: string; // Sélecteur de corps de message
    streamingChange: boolean; // Si le message est mis à jour de manière incrémentielle ou complète pour l'itération de la page web class gpt. gpt est incrémentiel
  };
}

Plus d'explications

Différence entre bloc et en ligne, si vous voulez en savoir plus, vous pouvez voir ici

  • L'élément de bloc occupe une seule ligne, et plusieurs éléments de bloc voisins occupent chacun une nouvelle ligne.
  • L'élément en ligne n'occupe pas une seule ligne ; plusieurs éléments en ligne voisins sont disposés sur la même ligne, et une nouvelle ligne n'est créée que lorsqu'une ligne est trop longue.