Chrome Extension を作成した話

ブラウザChromeの拡張機能はみなさんお使いのことであろう。
私も広告ブロッカーや、はてなのお知らせ等を入れている。

海外製のブログにて、javascriptやreactやらの記事を見ているのだが、翻訳して読む場合に困ったことがある。
コードサンプルまで訳してしまうのだ。

例えば、こんなふうになってしまう。

'react'からReactをインポートします 。importデフォルト関数Home ( { products } ) { return (

で、コードサンプルは翻訳しないようにする拡張機能を作ってみた。

通常、コードサンプルは<pre>タグ内に書かれることが多いと思う。
その内側に<code>タグが存在していると翻訳されていないようなのだが、そうなっていないこともあり上記のように残念な結果になる。

解決策としては、<code>タグを追加してやればよさそうだが、もっと簡潔な方法があった。
それは、class="notranslate"を付加すること。
このclass属性があれば、Google翻訳の場合、翻訳しない。
となれば、こちらのほうが容易である。

用意するファイルは、content_script.js とmanifest.json のふたつだけ。

github.com

content_script.js

const elements = document.getElementsByTagName("pre");
for (const element of elements) {
  element.classList.contains("notranslate") || element.classList.add("notranslate");
};

manifest.json

{
  "name": "sample-notranslate",
  "description": "Sample Chrome Extension",
  "version": "0.0.1",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "content_script.js"
      ]
    }
  ]
}

自己責任でのご利用をお願いする。3行ほどのコードで何も起こらないけど。。。

これらを適当なフォルダにまとめる。

sample-extension
   ├── content_script.js
   └── manifest.json

あとはChromeの拡張機能を管理メニューで表示されるページにまとめたフォルダをドロップするだけ。
その際、右上のデベロッパーモードをオンにしてドロップする。

---

文中に、data.tsx などとあった場合、データ.tsx になってしまうが、そこは脳内変換で。