GithubでGoogle翻訳から特定の単語群を翻訳させないようにしたい。

Question

前提

DeepL Code BlockerのようなChrome拡張機能の作り方を教えて欲しいです。

私はDeepL Chrome 拡張機能のヘビーユーザーですが、GitHubでの使い勝手が良くないです。翻訳が不要な単語(例えばFlutter, Goなど)やリポジトリのタイトルまで翻訳してGithubのページを非常に見づらくしてしまいます。
DeepL Code Blocker( https://chrome.google.com/webstore/detail/deepl-code-blocker/blmfehnodbgjheaofcecmjbbapmaikap?hl=ja )のようなChrome拡張機能を開発しようと思っています。

DeepLやGoogle翻訳から特定の単語群を翻訳させないようなアプローチは具体的にはどのように行えばいいでしょうか。私はTypeScriptやJavaScriptはあまり詳しくありません。

deeple code blockerで動いているスクリプト

(() => {
  "use strict";
  class e {
    static isElement(e) {
      return 1 === e.nodeType;
    }
  }
  const t = (e, t) => {
    const n = [...e.childNodes];
    for (; n.length; ) {
      const e = n.shift();
      if (!e) break;
      if (t(e)) return !0;
      n.concat(e.childNodes ? [...e.childNodes] : []);
    }
    return !1;
  };
  [
    ...[...document.getElementsByTagName("code")].filter(
      (n) => !t(n, (t) => e.isElement(t) && "PRE" === t.tagName)
    ),
    ...[...document.getElementsByTagName("pre")].filter(
      (n) => !t(n, (t) => e.isElement(t) && "CODE" === t.tagName)
    ),
  ].forEach((e) =>
    ((e) => {
      ((e) => {
        const t = (e) => {
            const t = window.getComputedStyle(e);
            [
              "background-color",
              "display",
              "color",
              "letter-spacing",
              "line-height",
              "content-wrap",
              "font-size",
              "font-weight",
              "font",
            ].forEach((n) => {
              e.style.setProperty(n, t.getPropertyValue(n));
            });
          },
          n = [{ element: e, visited: !1 }];
        for (; n.length; ) {
          const e = n.pop();
          if (!e) continue;
          const o = [...e.element.children].flatMap((e) =>
            e instanceof HTMLElement ? [e] : []
          );
          if (e.visited || !o.length) t(e.element);
          else {
            const t = [
              { element: e.element, visited: !0 },
              ...o.map((e) => ({ element: e, visited: !1 })),
            ];
            n.push(...t);
          }
        }
      })(e);
      const t = document.createElement("div");
      (t.style.display = window.getComputedStyle(e).display),
        (t.attachShadow({ mode: "closed" }).innerHTML = e.outerHTML),
        e.replaceWith(t);
    })(e)
  );
})();

Answer 1

DeepL Code Blocker という先行事例があるなら、それが何をやっているか解析してみてはどうでしょうか。インストールしてあれば、Chrome のユーザプロファイルディレクトリの中に blmfehnodbgjheaofcecmjbbapmaikap というディレクトリがあって、その中にソースがあるはずです。

Google 翻訳と同じように、HTML の translate 属性に従ってくれるかもしれません。そうであれば、翻訳したくない語を <span translate=no> </span> で囲むだけです。

Comments

[Nico]

ありがとうございます。大変助かりました。ソースコードを見れると思っていませんでした。。
下記のようなスクリプトでした。

解析中ですがなにか気づいた点があればご教示いただけたら幸いです。
いまのところなにがなんだか。。という感じです。

(() => {
"use strict";
class e {
static isElement(e) {
return 1 === e.nodeType;
}
}
const t = (e, t) => {
const n = [...e.childNodes];
for (; n.length; ) {
const e = n.shift();
if (!e) break;
if (t(e)) return !0;
n.concat(e.childNodes ? [...e.childNodes] : []);
}
return !1;
};
[
...[...document.getElementsByTagName("code")].filter(
(n) => !t(n, (t) => e.isElement(t) && "PRE" === t.tagName)
),
...[...document.getElementsByTagName("pre")].filter(
(n) => !t(n, (t) => e.isElement(t) && "CODE" === t.tagName)
),
].forEach((e) =>
((e) => {
((e) => {
const t = (e) => {
const t = window.getComputedStyle(e);
[
"background-color",
"display",
"color",
"letter-spacing",
"line-height",
"content-wrap",
"font-size",
"font-weight",
"font",
].forEach((n) => {
e.style.setProperty(n, t.getPropertyValue(n));
});
},
n = [{ element: e, visited: !1 }];
for (; n.length; ) {
const e = n.pop();
if (!e) continue;
const o = [...e.element.children].flatMap((e) =>
e instanceof HTMLElement ? [e] : []
);
if (e.visited || !o.length) t(e.element);
else {
const t = [
{ element: e.element, visited: !0 },
...o.map((e) => ({ element: e, visited: !1 })),
];
n.push(...t);
}
}
})(e);
const t = document.createElement("div");
(t.style.display = window.getComputedStyle(e).display),
(t.attachShadow({ mode: "closed" }).innerHTML = e.outerHTML),
e.replaceWith(t);
})(e)
);
})();

[Nico]

コメントでは見づらかったので編集でコード部分を最初の質問欄に追記しました。

[int32_t]

おお、translate 属性ではなく、翻訳してほしくない部分を closed ShadowRoot に移しているんですね。