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