Zenn
Closed46

GitHub の PR ページを平和なねこの集会にする Chrome 拡張機能をつくる

GitHub
Chrome Extension
みどりみちみどりみち

ねこのお力をお借りして、GitHub の PR のレビューを平和なものにするための拡張機能をつくりたい。

みどりみちみどりみち

DOM 操作で語尾を置き換えたいけど
DOM 構造がネストしていたりするときにでもテキストノードを取得するのがちょっと大変そう

みどりみちみどりみち

コメントの語尾が「にゃ」になる

  • 文末がアルファベット (+ 文末文字) だったとき nya をつける
    • OK → OK nya
    • This is good. → This is good nya.
    • What is the purpose? → What is the purpose nya?
  • 文末が日本語 (+ 文末文字) だったとき にゃ をつける
    • なぜこういう書き方をしたのですか？ → なぜこういう書き方をしたのですかにゃ？
    • 了解です → 了解ですにゃ
  • コードブロックの中では適用しない
みどりみちみどりみち

改行で文が終わる場合
$ 正規表現を使えばいい

句点で文が終わり、改行せず次の文が始まる場合
(\w)([.。!！?？]) → $1 nya$2

みどりみちみどりみち

コメントしている人のアイコンがねこになる

  • 同じ人は同じアイコン
  • 違う人は違うアイコン
みどりみちみどりみち

GitHub のアイコンの img 要素の src を差し替える。
ユーザーが誰かは alt 見れば取れそう。

<img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/..." width="40" height="40" alt="@<username>">
みどりみちみどりみち
  • アイコン要素全取得
  • 人数分のねこの画像取得
  • ユーザごとに画像の src を置き換え
みどりみちみどりみち

特定のユーザ名のアイコンは置き換えをスキップするオプションとかもつけたいにゃ

みどりみちみどりみち

コメントにねこの画像がのる

  • 各コメントの末尾にねこの GIF 画像がのる
  • すでに画像が末尾にのっていればスキップする
みどりみちみどりみち

任意のユーザには適用しない

  • ユーザ名のリストを指定すると、リスト内のユーザはねこ化がスキップされる
  • ユーザ名には正規表現を指定可能
みどりみちみどりみち

アイコンが誰のかは簡単に取得できたけど
コメントが誰のかの情報は要素の近くになさそう

いったんアイコン変換スキップだけにするか～

みどりみちみどりみち

画面遷移しても同じユーザには同じアイコンを表示する

  • 画像をリフレッシュするボタンも用意する
みどりみちみどりみち

popup 画面からどうやってメイン画面の DOM 触るんだろうと思ったけど
tabs.sendMessage で送って content scripts 側でリッスンしてあげればいいのね

みどりみちみどりみち

ページ種類ごとに有効化設定できる

  • 正規表現でマッチするページでは処理しない
    • プロフィールページやアバター設定ページなど
みどりみちみどりみち

設定項目が増えてきてポップアップに収まらなくなったので、アバター画像更新ボタンだけポップアップに残して options ページに移行にゃ

このスクラップは2023/12/05にクローズされました