Chromeページ翻訳でコードを翻訳させないスクリプトの作り方
やること
Chromeページ翻訳によって無残にも翻訳されてしまうReactプログラム...
コードが翻訳されてしまうのは、該当箇所をHTMLのcodeタグで囲んでないからです。
今回は、こちらのサイトのコードが記載されてる部分をcodeタグでラップする簡単なJavaScriptを組んで、Chromeデベロッパーツールのconsoleから実行して対策してみようと思います。
JavaScriptの勉強がてら参考にどうぞ🙋♂️
実装
1. 状況を把握する
F12で検証ツールを開いて中身を覗くと、やっぱりcodeタグで囲まれてないっぽいですね。
今こんな感じなのを、
<pre class="mdxCodeBlock_iHAB">
<div class="...">
...
</div>
</pre>
こうすれば、大丈夫そうです。
<pre class="mdxCodeBlock_iHAB">
+ <code>
<div class="...">
...
</div>
+ </code>
</pre>
2. コーディング
コメント付きの完成版
// スコープを汚染しないために即時関数で囲んでおく
(() => {
// 正規表現でclass名が 'mdxCodeBlock_' から始まるエレメントを全て取得
const codeBlockElements = document.querySelectorAll("[class^=mdxCodeBlock_]");
// エレメントごとに処理するためのループ
codeBlockElements.forEach((element) => {
// 子要素を削除する前に、コピーして残しておく
// 子要素は1つしかないので、children[0]でOK
// cloneNodeの引数は、deepcopyを有効にするか否か
const copiedChildren = element.children[0].cloneNode(true);
// 子要素を全削除
while (element.firstChild) {
element.removeChild(element.firstChild);
}
// codeエレメントを作成して、コピーしておいたエレメントをラップして元の場所に戻す
const wrapElement = document.createElement("code");
wrapElement.appendChild(copiedChildren);
element.appendChild(wrapElement);
});
})();
3. 適用
F12を押下して検証ツールを開いて、consoleタブに移動して今回のコードを叩きます。
実行後、ちゃんとcodeタグで囲まれてますね。
翻訳してもコードは無事です。(リロードのたびにスクリプトを実行する必要があります)
まとめ
こんな感じで同じようにやれば、他サイトも対応可能です。いちいちスクリプト実行するのが面倒であれば、Chrome拡張機能を自作して、ローカルで適用させれば永続化可能です。
ぜひ自力でやってみてください!!
ドキュメントオブジェクトモデル (DOM) - Web API | MDN
Twitter: @kzkzkazz
Author And Source
この問題について(Chromeページ翻訳でコードを翻訳させないスクリプトの作り方), 我々は、より多くの情報をここで見つけました https://qiita.com/kazzzzzz/items/28c973e8b4e74761c598著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .