GitHubでパブリックリポジトリへの誤投稿を防ぐ拡張機能を作った

この記事は はてなエンジニア Advent Calendar 2023 の2024年1月7日の記事です。
developer.hatenastaff.com

昨日は id:yunagi_n さんの Google Chrome 拡張機能 / Firefox アドオン作成ボイラープレート 2024 | なつねこメモ でした。2日連続で拡張機能の話ですね。

モチベーション

昨年、GitHubのあるパブリックリポジトリのissueにプライベートリポジトリに投稿すべきコメントを誤って投稿するインシデントを起こしてしまいました。
幸いすぐに気づき削除できたことや投稿内容に機密情報が含まれなかったことで大事にはならなかったものの、もしクレデンシャルや社外秘の情報を含んでいたら重大なインシデントになっていました。
そこで、何か対策ができないかと考えChromeの拡張機能を作ることにしました。

作ったもの

github.com

Chrome Web Store でも公開予定ですが、審査待ちのため公開されたらリンクを追加します。 公開されました。 chromewebstore.google.com

機能紹介

1. パブリックリポジトリ閲覧時ウインドウ下部にメッセージが表示され視覚的に分かりやすくする
   
2. パブリックリポジトリのissue/PullRequestの投稿フォームを非表示にして、フォームを利用するための確認をする
   

見どころ

CRXJS Vite Plugin

CRXJS Vite Pluginを使うと、ReactやVueなどのフロントエンドフレームワークを使いながら簡単にChromeの拡張機能を作成することができました。

ただ、2024/01/07時点では Vite v5を使ってしまうとnpm run buildでエラーを吐いて失敗してしまうので、対応するまではvite v4系を使うのが良さそうです。
Build error [crx:web-accessible-resources] TypeError: OutputBundle["manifest.json"] is undefined · Issue #836 · crxjs/chrome-extension-tools · GitHub

パブリックリポジトリの判別方法

この拡張機能を作るには、まずGitHubのリポジトリがパブリックリポジトリかどうかを判別する必要がありました。
ページのソースを見ていたらoctolytics-*のようなmeta属性があることに気づき、そのなかのctolytics-dimension-repository_publicからパブリックリポジトリかどうかを判別することができました。
例えば、tak-solder/public-repo-alertリポジトリのページには下記のようなoctolyticsタグが含まれています。

<meta name="octolytics-url" content="https://collector.github.com/github/collect">
<meta name="octolytics-dimension-user_id" content="6647629">
<meta name="octolytics-dimension-user_login" content="tak-solder">
<meta name="octolytics-dimension-repository_id" content="722461988">
<meta name="octolytics-dimension-repository_nwo" content="tak-solder/public-repo-alert">
<meta name="octolytics-dimension-repository_public" content="true">
<meta name="octolytics-dimension-repository_is_fork" content="false">
<meta name="octolytics-dimension-repository_network_root_id" content="722461988">
<meta name="octolytics-dimension-repository_network_root_nwo" content="tak-solder/public-repo-alert">

また、GitHubはSPAで作られており他リポジトリへの遷移時にドキュメントのロードを挟まないことがあるため、その場合でも正しく動作するようにMutationObserverを利用してmeta属性を監視する必要がありました。

GitHubのUIを尊重する

拡張機能は第三者のサイト(GitHub)のUIを変えるものなので、元のデザインは尊重すべきと考えました。
ありがたいことにGitHubは Primer Design System によって作られているので、ほぼCSSを書かずにクラスだけで見た目を整えています。
これによって、ユーザーがGitHubのテーマを変更していてもテーマに合ったUIを提供することができました。

はじめはフォームのsubmitイベントで投稿直前に確認を出す方法にしようかと思っていたのですが、未然に防ぐにはフォームに入力する行動自体を止める方が有効と考え、少し強引な実装でもフォームを隠すようにしました。

まとめ

起こしてしまったインシデントをなくすことはできないので、インシデント起こした後に誠意を持った対応をすることが大切です。
ヒューマンエラーをゼロにすることは不可能なので、同じインシデントを繰り返さないためにどうするかを考えることが最大の誠意に繋がると考えています。