人のツイートの続きをAIが書いてくれるChrome拡張を作った

クソアプリアドベントカレンダー2023 15日目担当の @nabettuです。

クソアプリアドベントカレンダーも今年でなんと9年目！

先日は初めてのオフラインイベントである クソアプリハッカソン を開催しました。

そのハッカソンで開発してきたクソアプリを、みなさんにお披露目したいと思います。

成果物

表題の通り「人のツイートの続きをAIが書いてくれるChrome拡張」を作ってきました。

このChrome拡張を入れると、ツイートのテキストの最後に「続きを書かせる」ボタンが表示され、それを押して少し待つと、、、自動で続きのテキストを続きを追加します。

サンプルとして

GoogleMapでぼったくりって検索すると怨嗟のクチコミが多数発見できるな。
とりあえず歌舞伎町でキャッチに付いていくとろくなことにならないってことと、韓国語でぼったくりは바가지と書くという知見を得た。

というテキストだったのが、

その後、私は興味本位でキャッチに付いていってしまいましたが、たしかにぼったくりの被害にあってしまいました。みなさんもくれぞれも注意してください。

と、勝手に私がぼったくりにあってきたというエピソードが追加されてしまいました😂www

こんな感じで、他人のツイートでもAIに勝手に続きを書かせると意外と面白いテキストになったります。

使い方

こちらのリポジトリをクローンし、

1. Firebase functions にデプロイしてください。その際 API_KEY などはご自身で設定
2. contentScript の API 先を 1 の URL に変更
3. npm run build をして、build ディレクトリを chrome 拡張の設定画面でインストール
4. Twitter でツイート画面でリロードするとボタンがでます。（画面遷移で出たり出なかったりはご愛嬌）

作り方

こちらのアプリはテキストを取得→バックエンドに投げて、返ってきたものを追記するChrome拡張と、AIに問い合わせてテキストを返すバックエンドの２つでできています。

Chrome拡張側の作り方

まずChrome拡張の動作としては。TwitterはSPAで動的なコンテンツが表示されているため、root要素にMutationObserverでツイートが表示される監視をします。

MutationObserverでの動作後に、ツイートのテキストをquerySelectorAllで検索し、表示されていたら続きを書かせるボタンを設置します。

続きを書かせるボタンでの動作としてはツイートテキストを取得するのですが、Twitterでは絵文字はimg要素、ハッシュタグはリンク要素などになっているため、そのあたりをプレーンなテキストに変換します。

プレーンなツイート文言ができたら、それをバックエンドに投げ、返ってきた値を元のツイートに追記して終わりです。

あとはChrome拡張用のマニフェストファイルなどを記載して、Chromeの設定から読み込むだけです。

バックエンド側の作り方

こちらは単純にChatGPTのAPIに対して上記のテキストに下記のようなプロンプトを追加しつつ投げ込んで、結果を返すシンプルなAPIを開発します。

${tweetText}\nというツイートの続きを書いて、その続きのテキストだけを、語尾も揃えた形で返信してください。

その際CORSやTokenの流出などに注意してください。

まとめ

最後までお読みいただきありがとうございました。

来年はこのクソアプリアドベントカレンダーも10年目ですので、なにかまたイベントでもやりたいですね〜

明日は @nishihara_zari さんです！よろしくお願いします！