Twitter の引用 RT に関する仕様変更を元に戻す Chrome 拡張機能を作った【TwitterRevertRT】

10 月 20 日から始まった Twitter の RT（引用 RT）に関する仕様変更（改悪） で Twitter のリツイート周りの仕様が変わり、リツイートボタンをクリックすると引用ツイートの入力画面が開くようになってしまったことは記憶に新しいかと思います。
当初は大統領選が終わるまでの臨時的措置のはずでしたが、「誤情報の拡散を抑制できた」ということで、この措置は当面の間継続となるようです。

私のように（Twitter 運営の目論見とは裏腹に）リツイートが面倒くさくなって煩わしく思っている、そんな人のために、Twitter のリツイート（RT）・引用ツイートの仕様変更を以前の挙動に戻す Chrome 用拡張機能、 TwitterRevertRT を作ってみました。

リツイートボタンをクリックするとコンテキストメニューが表示され、以前の Twitter 同様に通常リツイートか引用ツイートかを選択できます。
「リツイート」をクリックすると、引用ツイートの入力画面を見ることなくワンクリックでリツイートできます。
「引用ツイート」をクリックすれば引用ツイートも可能です。

注意

• 不具合はできるだけ直したつもりですが、やむを得ず強引に実装しているため、予期しない不具合があるかもしれません。
  • Twitter 側の JavaScript には干渉できないため、外部から無理やり操作しようとゴリ押すほかない…
  • スマホ版の Twitter にも一応対応していますが、DOM を強引に操作する形で実装しており、PC 版よりも不安定です。
• Twitter に関連する他の拡張機能や UserScript をインストールしている場合、競合して正常に動作しない可能性があります。
• トランプの一部ツイート等で見られる「This claim about election fraud is disputed」と注意書きのあるツイートではうまく動作しませんが、これは仕様です（やろうと思えば動かせるだろうけどかなり面倒…）。
• 言うまでもありませんが、アプリ版の Twitter では利用できません。
  • スマホ版 Chrome では拡張機能の概念自体がないため、そもそもインストール自体ができません。
  • よって、結果的に PC 版の Chrome でのみ使えるということになります。
  • この記事では Windows での手順で説明します（ macOS でも動くことは確認済みです）。

インストール

Chrome ウェブストア を開き、［Chrome に追加］ボタンをクリックします。

「『TwitterRevertRT』を追加しますか？」というダイヤログが出るので、［拡張機能に追加］をクリックします。
これでインストールは完了です。設定画面等はありません。

インストール（旧）

ダウンロード・配置

GitHub にアクセスし、緑色の Code ボタン → [Download ZIP] をクリックして拡張機能をダウンロードします。

ダウンロードが終わったら解凍して、適当なフォルダに配置します。
多分 TwitterRevertRT-master とかいうフォルダ名になってるので、TwitterRevertRT とリネームしてください。
ドキュメント以下なりどこでもいいとは思いますが、Chrome に拡張機能を読み込ませた後にフォルダの場所を変更するとちょっと面倒なことになるので、後から動かさなさそうな場所がおすすめです。

Chrome にインストール

Chrome を開き、右上の ︙ ボタン → [その他のツール] → [拡張機能] に移動します。

[拡張機能] ページが開くので、右上の [デベロッパー モード] のスイッチをオンにします。

デベロッパー モードを有効にすると [パッケージ化されていない拡張機能を読み込む] というボタンがあるので、それをクリックします。

[拡張機能のディレクトリを選択してください] というフォルダ選択画面が表示されるので、先ほど TwitterRevertRT を配置したフォルダに移動して、[フォルダーの選択] をクリックします。

拡張機能ページの中に TwitterRevertRT が表示されていて、スイッチが有効（青色）になっていれば拡張機能のインストールは完了です。

更新方法

インストール同様に GitHub の  [Download ZIP] からダウンロードして、中のファイルを TwitterRevertRT を配置したフォルダに移動（上書き）してください。
その後 Chrome を再起動するか、拡張機能ページのスイッチの横にある更新ボタンをクリックすると更新が反映されます。

使い方

さっそく Twitter のページを開いてみましょう！すでに開いている方は一度リロードしてください（👈重要）

今回の仕様変更で、ツイート内のリツイートアイコンをクリックすると通常リツイートか引用ツイートかのコンテキストメニューが表示されず、直で引用ツイートの画面が表示されるように変更されてしまいました（コメントを入れずに引用ツイート画面内の [リツイート] ボタンを押すと通常のリツイート扱いになるような仕様に変わっています）。

この拡張機能をインストールすると、リツイートボタンをクリックした後にコンテキストメニューが表示されるようになり、以前の Twitter 同様に通常リツイートか引用ツイートかを選択できます。

「リツイート」をクリックすると、引用ツイートの入力画面を表示することなくワンクリックでリツイートできます。「引用ツイート」をクリックすると、通常通り引用ツイートのコメント入力画面を開きます。

おそらく、一度試していただいた方が早いです。
V1 では左クリックで通常リツイート、右クリックで引用ツイートと操作が直感的でなく、通常リツイートも一瞬引用ツイート画面が表示されるなど完全に以前の挙動にできずにいました。
現行の V2 ではコンテキストメニューから通常リツイートと引用ツイートを選択できるようにし、一瞬たりとも引用ツイート画面を表示することなく通常リツイートできるようになるなど、10 月 20 日以前の Twitter の挙動に極力近づいているかと思います。

動作を無効にしたい場合は拡張機能自体を無効にしてください。
拡張機能の有効 ⇔ 無効は chrome://extensions 内のスイッチから切り替えられます。

仕組み・余談

V1 では MutationObserver という  DOM の変化を監視する API を用いて実装していましたが、DOM の変化が多すぎる上に Twitter が React で実装されているため CSS クラスがランダムな文字列で要素の判別が困難だったりと、 判定漏れや二重実行が起きやすく、かなり不具合を抱えていました。

V2 では MutationObserver を使うことを諦め、0.5 秒ごとに DOM 上に存在する全てのリツイートボタンに onclick イベントを設定し、リツイートボタンをクリックした時にコンテキストメニューが表示される状態にしています。このとき引用ツイートのフォームも DOM 上には表示されていますが、CSS に opacity: 0; を設定することで不可視になっています。

コンテキストメニュー以外の領域がクリックされたときは、引用ツイートのフォームの半透明になっている部分を  click() し、ツイート画面に戻ります。
「リツイート」がクリックされると、透明状態のまま引用ツイートのフォーム内の「リツイート」ボタンを click() し、先ほど同様ツイート画面に戻ります。
「引用ツイート」がクリックされると、一度透明にした引用ツイートのフォームを opacity: 0; を解除して表示し、コメントを入力できる状態にします。
コンテキストメニューは独自で HTML やスタイルを組んでいますが、極力他のコンテキストメニューとの違和感がないよう調整しています（登場時のアニメーションを他とあわせてあるのがこだわりポイント）。

おわりに

 Twitter改悪!?ありえない話し!! 謝れ!! 謝れ!! 謝れ!!

あと！もしよかったら！！下のボタンからシェア！！！してね！！！！（宣伝）