DeepLのChrome拡張を入れたらテキストエリアを拡大できなくなる件

解決したい問題

2023/01/22現在、大人気翻訳ツールDeepLのChrome拡張機能をインストールすると、テキストエリアの拡大ができなくなり、非常に不便です。

DeepLのChrome拡張機能をインストールすると、テキストエリアのリサイズ位置をDeepLアイコンが絶妙にディフェンスしてきます。

解決していく

オプションでアイコン消せそう、消せば解決しそうですよね。
やっぱりオプションはありました。

おーアイコンは消えました。
ですが、テキストエリアのリサイズができません。
どうやら見えない壁があります。

いました。
z-index: 1999999999;...
高すぎる見えない壁ですね...

いろいろ解決方法があるかとは思いますが、
今回は、目には目をChrome拡張にはChrome拡張をということで、見えない壁を打ち砕くChrome拡張をサクッと作成してみようと思います。

要は<deepl-inline-translate>要素さんを削除するだけで良さそうですね。
親要素(<deepl-inline-translate>)を取ってきて、丁寧に子要素さん達を削除してあげます。
DeepLアイコンが再生成される度に削除したいので、再定義可能なvarで変数宣言しています。

remove.js

var elements = document.getElementsByTagName('deepl-inline-translate')
while (elements.length) {
  elements.item(0).remove()
}

どのタイミングでDeepL要素兄やん達を削除するかですが、
都度削除したスッキリ感を味わえるように、今回作成するChrome拡張アイコン押下で削除できるようにします。
アイコン押下でremove.js発火ですね。
アイコン押下で特定のjsファイルを発火させるために、chrome.scriptingAPIを使用しています。

background.js

chrome.action.onClicked.addListener((tab) => {
   chrome.scripting.executeScript({
     target: {tabId: tab.id},
     files: ['remove.js']
   });
 });

後はChrome拡張を作成する上で必須のmanifest.jsonを用意してあげます。
chrome.scriptingAPIを使用するためには、manifest_versionを3以降に指定し、scriptingパーミッションが含まれている必要があります。
ref. https://developer.chrome.com/docs/extensions/reference/scripting/#manifest

manifest.json

{
	"name": "Remove DeepL Icon",
	"manifest_version": 3,
	"version": "0.1",
	"permissions": ["activeTab", "scripting"],
	"action": {},
	"icons": {},
	"background": {
		"service_worker": "background.js"
	}
}

あとは、拡張機能設定画面(chrome://extensions/)にて、「デベロッパーモード」をONにし、「パッケージ化されていない拡張機能を読み込む」ボタンから今回作成した拡張機能を読み込めばOKです。

ソース:
https://github.com/yto-tkg/chrome_extension_remove_deepl_content

まとめ

公開しなくてもサクッとChrome拡張を自作して読み込めるのは便利ですよね。
とはいえ、DeepLさんのアイコンはなぜそこに...