ようこそ(*'▽')

開設日：20231106

Twitterの色を少し強化する拡張機能

つくったもの

きっかけ↓

0. 目次

  1. 拡張機能紹介
  2. 導入方法
  3. 色のカスタマイズ方法
  4. ソースコード公開
  5. 没供養

1. 拡張機能紹介　　　　　ここをクリックで表示切替できます

1.1. 機能

次の①と②の二か所の色を好きな色に変更できます。（①と②はそれぞれ独立でなので、新しく選ぶ色は2種類です。）
画像は、①と②の両方を濃い青色に設定した場合です。

  • ①ツイートボタンをホバーした時の色を変えられます

      • ホバー前
    hover前の画像
      • ホバー中
    hover中の画像

  • ②その他細かい部分の色を変えられます

      • 公式バッジ（青のだけ）
    公式バッジの画像
      • 通知欄の 人アイコン, ベルアイコン
    通知欄の人アイコンと通知アイコンの画像
      • ツイート欄の 各アイコン（ホバー時）

    赤で囲った部分の色が変わります。 ただツイッターの表示設定でピンクにしても紫にしても、ここは水色のままなんですよ。

    ツイート欄の各アイコンをホバーしたときの画像

1.2. ポップアップ画面

ポップアップ画面も作りました。
ポップアップ画面は、chromeブラウザの右上に表示される拡張機能アイコンをクリックすることで表示されます。 画像は少し古いもので、配布ばーじょんと異なります

popup.htmlの見た目

1.3. 注意点

  • 急に動かなくなる可能性アリ(ﾟДﾟ;)

    Twitter側のアップデートなどにより、html要素に改変が入った場合、指定しているスタイルが外れてしまいます。
    こうなった場合、素直に拡張機能は削除してくださいorz
    もっと技術があれば解決した？かも？？...　　第5.2節で詳しく書きます

 

2. 導入方法

2.1. DLページ

2.2. 導入手順

  1. zipを解凍する

  2. 「Colotter_04」フォルダを好きな場所に移す

    • 編集することが前提なので、アクセスしやすい場所がおすすめです

  3. chromeを開く

  4. url欄に「chrome://extensions/」と入力

  5. 画面右上の「デベロッパーモード」をONにする

  6. 「Colotter_04」フォルダをブラウザ画面にドラッグアンドドロップ

    • 次のようになれば導入完了です！

  7. ついでに設定

    因みに、ブラウザ右上にアイコンを表示させるには...
    右上のパズルピースアイコン→ピン止めです

 

3. 色のカスタマイズ方法

本当はpopup画面から直接色を変更できるようにしたかったのですが、どうしてもやり方が分からなくて、超超面倒くさい方法になってしまいましたorz
代わりにというのもなんですが、ファイル内のコメントアウトで詳しく説明を書いています。

3.1. 手順

  1. 拡張機能がまとまっているフォルダを開く

  2. color_overwrite.cssファイルを開く

  3. コメントアウトに従って①と②の色をそれぞれ設定する

    • CSSの変数機能を利用しています
    • color_1, color_2という変数は選べる色2色分に対応しています（必要があれば入れ替えてください）
    • 仕様上、twitter側で設定した色に応じて書き換える必要がある箇所があります（←Ctrl+/だけで済むようになっています）
    • Twitterの設定で選べる色（水色を除く5色分）のサンプルカラーをrgbで用意しています。

  4. chromeの拡張機能管理画面で更新をかける

  5. 最後にツイッターをリロード

 

4. ソースコード公開

埋め込みが大変だったので、GoogleDocsで公開します ←めっちゃ便利でびっくりした
因みにフォルダ構成はこんな感じでとてもシンプルです

4.1. manifest.jsonを見る↗

4.2. color_overwrite.cssを見る↗

4.3. popup.htmlを見る↗

 

5. 没供養

5.1. ばーじょん数

フォルダ名「Colotter_04」の04はバージョン番号です。今回のバージョンになるまでの流れを紹介します...

  1. バージョン０

    • バージョン１を上書きしたことにより消失

  2. バージョン１

    • ０で見落としていた箇所にも色当て（読み込み中のぐるぐる, 新着通知の背景）
      background.jsを使おうとして失敗など

  3. バージョン２

    • 色の変更をポップアップ画面や、別途設定画面をhtmlとJS（DOM？←わからん）で実装しようとして失敗

  4. バージョン３

    • chromeAPIを利用してみようとして失敗...

5.2. CSS-in-JSの悪夢

まず、Twitterのhtml要素に当てられているクラス名が暗号すぎる。色改変の拡張機能を作り始めるにあたって、F12の開発者ツールでちまちま調べるのですが、それが大変すぎる。

そして、頑張って全てに色割り当てが完了した！と思ったら、数日後なぜか一部の色が割り当てられていない状態になりました...
原因はTwitterでは「CSS-in-JS」という技術が使われているからだそうです。
これが使われているWebページは、クラス名が変更されるみたいです

しかし、一部色改変が無効にならなかった部分があり、それがばーじょん４で色を変えられる部分となっています。
つまり、このばーじょん４も予期せず使えなくなることがあるってことです...

公開を想定して一生懸命作ったGoogleDocsもあるのでここで供養（見て...）←時間の無駄です。
　●ばーじょん３の頃公開を想定して作ったもの↗
　●ただの雑メモ↗

 

諸情報

コメント

11月16日深夜, ふと思い立って作り始めた拡張機能.
最低限の機能を作るのは簡単だったけど, 実際に使いやすさとかを意識すると想像以上に奥深いし, 圧倒的技術不足で時間が無限にかかりそうだったので, このくらいでひと段落ということにします. （絶望の谷というものを思い知りました）

そして, 今回も配布してます. DLしてくれたらめっちゃ喜びます. SNSで導入報告してくれたらさらに喜びますふぁぼリツイートしまくります.

いろいろと程度の低いものでしたが, ここまで読んでくれてありがとうございます.

参考（一部）

１）SDK株式会社電算システム Chromeの拡張機能の作り方をわかりやすく解説 URL↗ （参照日：23/11/16）

２）Qiita [Chrome拡張]オプションページを表示する方法 URL↗ （参照日：23/11/18）

３）Zenn Chrome拡張機能開発の始め方 2022 manifest v3 URL↗ （参照日：23/11/18）

更新ログ

231123_22??: 記事書き始め
231124_0517: 記事ほぼ書き終え
231125_1510: 少し修正