どもども、ランサーズでSREしているogimanです。
いやーほえーふがー気候が最高ですね。
通勤もラクになったので日々テンション↑↑
今回は生成AIで作成したChrome拡張機能のご紹介
バイブコーディングで作っているのでコードは書いてません。
コードは煩雑かもしれませんが、こんなものをほぼ手放しで30分くらいで出来てしまうのがすごい！
良い時代ですねー
GitHub Text To Issue
WebページからワンクリックでGitHubイシューを作成できるChrome拡張機能です。
サイドパネル形式で使いやすく、選択したテキストやページ情報を自動的にイシューに含めることができます。
Github Projectに対応しています。
背景
毎回、Githubを開いてISSUE作成してっていうのが面倒でした。
Chrome拡張機能とかでさくっとできないか？というのが事の発端です。
似たようなChrome拡張機能はあったのですが、GithubProjectに対応したものがなかったので作ってみました。
めちゃくちゃISSUE作成するのがラクになったのでうれしー！
生成AIに感謝感激でーす。
🚀 主な機能
-
Chrome拡張機能を押下すると、事前に設定したGithub Projectのフィールドから選択できる
-
WEBサイト内のテキストを選択して右クリックすると、選択したテキストがISSUEに追加される
✨ サイドパネルUI
- サイドパネル形式: ポップアップではなくサイドパネルで表示され、より広い作業スペースを提供
- レスポンシブ対応: パネル幅を調整すると自動的にコンテンツもリサイズ
- 常時表示: ページを移動してもパネルが開いたまま
📝 イシュー作成機能
- 自動URL取得: 現在のページURLを自動的に取得
- 手動編集対応: Current URLフィールドは編集・追記可能
- テキスト選択対応: ページ上のテキストを選択してコンテキストメニューから直接イシュー作成
- タイトル自動設定: ページタイトルを基にイシュータイトルを自動設定
🔧 高度な設定機能
- 複数リポジトリ管理: 複数のGitHubリポジトリを登録・管理
- デフォルトリポジトリ設定: よく使うリポジトリをデフォルトに設定
- ラベル・アサイニー: デフォルトのラベルやアサイニーを事前設定
- GitHubプロジェクト連携: プロジェクトフィールドの自動取得・設定
- プロジェクトフィールド: Urgent、EPIC、Important、Estimateなどのカスタムフィールドに対応
📦 インストール方法
開発者モードでのインストール
- このリポジトリをクローンまたはダウンロード
- Chromeで
chrome://extensions/を開く - 右上の「デベロッパーモード」を有効にする
- 「パッケージ化されていない拡張機能を読み込む」をクリック
- このプロジェクトのフォルダを選択
⚙️ 初期設定
1. GitHubトークンの作成
- GitHub Settings > Personal Access Tokens にアクセス
- 「Generate new token」をクリック
- 以下のスコープを選択：
-
repo(リポジトリへのフルアクセス) -
project(プロジェクトへのアクセス)
-
- トークンを生成してコピー
2. リポジトリの設定
- 拡張機能のアイコンをクリックしてサイドパネルを開く
- 「Settings」ボタンをクリック
- 「Add Repository」をクリック
- 以下の情報を入力：
- Organization/Owner: GitHubのオーガニゼーション名またはユーザー名
- Repository: リポジトリ名
- GitHub Personal Access Token: 作成したトークン
- Default Labels: デフォルトで付けるラベル（オプション）
- Default Assignees: デフォルトのアサイニー（オプション）
3. プロジェクト設定（オプション）
- リポジトリ設定で「Fetch Projects」をクリック
- 利用可能なプロジェクトから選択
- 「Fetch Fields」でプロジェクトフィールドを取得
- 使用するフィールドにチェックを入れる
🎯 使用方法
基本的な使い方
- サイドパネルを開く: 拡張機能のアイコンをクリック
- リポジトリ選択: ドロップダウンからターゲットリポジトリを選択
- イシュータイトル入力: イシューのタイトルを入力
- URL・詳細編集: Current URLフィールドで追加情報を入力
- ラベル・アサイニー選択: 必要に応じて選択
- プロジェクトフィールド設定: Urgent、EPIC等のフィールドを設定
- イシュー作成: 「Create Issue」ボタンをクリック
テキスト選択からの作成
- Webページ上でテキストを選択
- 右クリックして「Create GitHub Issue with selected text」を選択
- サイドパネルが開き、選択したテキストが自動的に含まれる
- 必要に応じて編集してイシューを作成
🏗️ プロジェクト構造
GithubTextToIssue/
├── manifest.json # 拡張機能の設定ファイル
├── background.js # バックグラウンドスクリプト
├── popup.html # サイドパネルのHTML
├── popup.js # サイドパネルのJavaScript
├── options.html # 設定ページのHTML
├── options.js # 設定ページのJavaScript
├── styles.css # サイドパネルのスタイル
├── options.css # 設定ページのスタイル
├── icons/ # 拡張機能のアイコン
└── README.md # このファイル
🔧 技術仕様
対応ブラウザ
- Google Chrome 114以降（Side Panel API使用）
使用技術
- Manifest V3: 最新のChrome拡張機能仕様
- Side Panel API: サイドパネル表示
- GitHub REST API: イシュー作成・プロジェクト管理
- Chrome Storage API: 設定データの保存
- Context Menus API: 右クリックメニュー
主要ファイルの役割
manifest.json
- 拡張機能の基本設定
- 権限とAPIの定義
- サイドパネルの設定
background.js
- サービスワーカー
- コンテキストメニューの管理
- サイドパネルの開閉制御
popup.js
- サイドパネルのメインロジック
- GitHub API呼び出し
- イシュー作成処理
options.js
- 設定ページのロジック
- リポジトリ管理
- プロジェクトフィールドの取得・設定
🎨 カスタマイズ
スタイルの変更
-
styles.css: サイドパネルのスタイル -
options.css: 設定ページのスタイル
デフォルト幅の調整
manifest.jsonのside_panel.default_widthで初期幅を変更可能（現在385px）