メインコンテンツにスキップ

高度なカスタマイズオプション

UIでは編集できない高度なユーザー向けのカスタマイズ設定を、拡張設定ページ -> 開発者設定 -> ユーザー設定で編集できます。パラメータの詳細については最後の注意書きを参照してください。現在の組み込みconfigこちらで確認できます。

ユーザールール

Rulesを使用すると、特定のウェブサイトの設定をカスタマイズし、翻訳が必要なコンテンツやページのスタイルを調整することができます。

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

matchesを使用して対応するウェブサイトを一致させます。ワイルドカードが使用可能です。例:*.google.comwww.google.com/test/*file://*

selectorsを使用すると、スマート翻訳範囲を上書きし、そのセレクタに一致する要素のみを翻訳します。

excludeSelectorsを使用して、位置を翻訳せずに要素を除外します。

additionalファミリーのセレクタを使用して、インテリジェント翻訳に基づいて翻訳範囲を増減させます。

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

要素を分離せずに全体として扱いながら領域を翻訳したい場合は、atomicBlockSelectorsセレクタを使用できます。例えば、Instagramのプロフィールです。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を使用してページスタイルを調整し、それを修正することができます。例えば、YouTubeのヘッダーで、元のページの最大高さを削除するために使用されます。

{
"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を使用すると、カスタムウェブスタイルをグローバルに挿入できます。RulestranslationClassesと一緒に使用できます。

".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が一致した場合、そのruleのためにgeneralRuleとルールがマージされます。

Configの一般的なフィールドのいくつかを紹介します。

ポップアップパネルに未設定の翻訳サービスを表示しない

"showUnconfiguredTranslationServiceInPopup": false

翻訳サービスの設定

translationServiceを使用してデフォルトの翻訳エンジンを選択します。現在サポートされているのは以下の通りです:

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

translationServicesを使用して各翻訳サービスのapikeyを設定します。異なるサービスプロバイダーには異なるパラメータが必要であり、それぞれのウェブサイトの開発者センターでAPIキーをリクエストできます。

例えば、Tencent Translatorの場合、secretIdsecretKeyを設定する必要があります。Tencent Cloudにアクセスして、月に500万文字まで無料のAPIキーを申請できます。申請プロセスについてはこちらを参照してください。

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

matchesフィールドは、この翻訳サービスを特定のウェブサイトで使用します。

limitフィールドは、この翻訳サービスの1秒あたりの最大リクエスト数を指定します(一部のサービスは1秒あたりの最大リクエスト数を制限しています)。

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": "なし",
"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は、特定のサイトに対するルールを設定するための配列オブジェクトで、例えばTwitterで特定の領域のみを翻訳するように設定できます:

{
"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[]; // 追加セレクタ、一致する要素はブロック要素として扱われ、1行に翻訳されません。
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; // 翻訳エリアのプレフィックス。デフォルトはsmartで、文字数に応じて改行するかしないかが決まります。
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; // 4本の指で触れると翻訳します。0、2、3、4、5に設定できます。

// AIストリーミング翻訳
aiRule: {
streamingSelector. string; // gptウェブページで翻訳される要素をマークするセレクタ
messageWrapperSelector: string; // メッセージ本体セレクタ
streamingChange: boolean; // クラスgptウェブページの反復に対してメッセージが増分的に更新されるか完全に更新されるか。gptは増分的です。
};
}

詳細説明

ブロックとインラインの違いについて、詳しく知りたい場合はこちらを参照してください。

  • ブロック要素は1行を占有し、複数の隣接するブロック要素はそれぞれ新しい行を占有します。
  • インライン要素は1行を占有せず、複数の隣接するインライン要素は同じ行に配置され、1行が多すぎると新しい行が作成されます。