feat: improve communication with new Selection Command Hub via background_script

[Copilot]

• mainブランチ（PR Feat/download button #395）をマージ: useCommandHubBridge.ts コンフリクト解決
• background.ts 修正: onPortConnect 内での未初期化 tab 参照 (ReferenceError) を let tabId 方式で解消
• background.ts 修正: tab.id 未取得時の removeListener リーク解消
• background.ts 修正: catch ブロックでも removeListener を呼ぶよう対応
• background.ts 修正: onMessageExternal 失敗時のレスポンスを { result: false, error: ... } 形式に統一
• background_script.ts 修正: removeCommand ロジック整理
• background_script.ts 修正: install_id→client_id、installId→clientId にリネーム
• background_script.ts 修正: addCommand の Promise チェーンに .catch() を追加
• hub/background.ts 修正: Ipc.callListener の型引数を { result: boolean; error?: string; client_id?: string } に更新
• hub/background.ts 修正: hubOrigin をモジュールトップレベルで一度だけ計算するよう変更
• hubShare.ts 修正: void Ipc.send(...).catch(...) でエラーをログ出力するよう変更
• hubShare.test.ts 修正: mockClear() → mockResolvedValue(true) に変更、エラーケース（SH-08）テスト追加

[ujiro99]

@copilot
https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ja#external-webpage
を確認してください。
そして、Hubからのメッセージを受ける部分はbackground-script.tsで行ってください。cintent-scriptでの処理は最低限にしてください。

[Copilot]

@copilot
https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ja#external-webpage
を確認してください。...

対応しました（コミット 161005d）。

変更内容:

1. manifest.json に externally_connectable を追加 — ハブページ（selection-command-hub.siro-cola.workers.dev/*）が chrome.runtime.sendMessage() で直接 background script にメッセージを送れるようにしました。

2. background_script.ts に chrome.runtime.onMessageExternal リスナーを追加 — AddCommand / DeleteCommand をハブページから直接受信し、既存の IPC ハンドラ（Ipc.callListener）を再利用して処理します。

3. hooks/useCommandHubBridge.ts からは AddCommand/DeleteCommand のリレー処理を削除しました — コンテンツスクリプトは「share コマンドのセッションストレージ読み取り → ハブページへの postMessage 転送」のみに最小化しています。

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• developer.chrome.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[ujiro99]

@copilot
mainブランチで以下のPRにより useCommandHubBridge でコンフリクトが発生しています。以下のPRの内容を確認のうえ、最新のmainを取り込んでください。
#395

[Copilot]

@copilot
mainブランチで以下のPRにより useCommandHubBridge でコンフリクトが発生しています。以下のPRの内容を確認のうえ、最新のmainを取り込んでくださ...

対応しました（コミット 1d355bb1）。

mainブランチ（PR #395）をマージし、useCommandHubBridge.ts のコンフリクトを解決しました。

解決方針:

• PR Feat/download button #395 の実装（AddCommand/DeleteCommand/RequestInstalledCommand/SyncInstalledCommand + ACK応答 + analytics + インストール済みコマンドのプロアクティブ同期）をベースとして採用
• 本PRで追加した share コマンドの session storage 経由 postMessage 転送処理を統合

全804テストがパスしています。

[codecov]

Codecov Report

❌ Patch coverage is 75.27473% with 45 lines in your changes missing coverage. Please review.
✅ Project coverage is 27.08%. Comparing base (18b5bda) to head (cefad1b).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/extension/src/background_script.ts	16.00%	21 Missing ⚠️
packages/extension/src/new_command_hub.tsx	0.00%	9 Missing ⚠️
...src/components/option/editor/CommandEditDialog.tsx	0.00%	7 Missing ⚠️
packages/extension/src/services/hub/background.ts	94.78%	6 Missing ⚠️
...ackages/extension/src/hooks/useCommandHubBridge.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #398      +/-   ##
==========================================
+ Coverage   26.77%   27.08%   +0.31%     
==========================================
  Files         312      315       +3     
  Lines       31742    31776      +34     
  Branches     1682     1717      +35     
==========================================
+ Hits         8498     8607     +109     
+ Misses      23244    23169      -75     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

概要

Options ページと新しい Selection Command Hub 間の通信を、window.open() + postMessage() 直結から、background service worker 経由の IPC / external messaging を中心とした構成へ移行する PR です。あわせて、コマンド編集画面の「変更検知」ロジックを切り出してテスト可能にしています。

懸念点

• Hub 共有フロー（services/hub/background.ts）に未初期化変数参照（ReferenceError）になり得る重大なバグがあります。
• Hub の URL（NEW_HUB_URL のデフォルト: pages.dev）と、manifest.json の content_scripts / externally_connectable の matches が不整合で、デフォルト設定のままだと機能が動かない可能性が高いです。
• hubShare.ts が IPC 送信結果を待たずに成功扱いで返し、送信失敗時の未処理 Promise/rejection や UI 誤表示につながります。
• removeCommand の削除結果が不正確（存在しない ID でも成功扱い）です。

改善提案

• Hub の実運用ドメインを 1 つに決め、NEW_HUB_URL / manifest / origin 検証を揃える。
• Hub 共有フローの tabId 管理と listener の後始末を見直し（リークと race を解消）。
• Hub 連携 API のレスポンス型（成功/失敗）を一貫させる。
• shareCommandToHub を async 化するか、失敗時のハンドリングを追加して UI と整合させる。

Changes:

• Hub 共有を hubShare.ts → IPC 経由（BgCommand.shareCommandToHub）に変更
• background 側に Hub 連携（共有/外部メッセージ）処理とテストを追加
• コマンド変更検知ロジックを hasCommandChanged として分離しテスト追加

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
packages/extension/src/test/setup.ts	chrome.runtime.onMessageExternal のモックを追加
packages/extension/src/services/ipc.ts	BgCommand.shareCommandToHub を追加
packages/extension/src/services/hubShare.ts	Hub 共有を IPC 呼び出しに置き換え
packages/extension/src/services/hubShare.test.ts	共有ロジックのテストを IPC 前提に更新
packages/extension/src/services/hub/background.ts	Hub 共有（external port）/ 外部メッセージ処理を追加
packages/extension/src/services/hub/background.test.ts	Hub background ロジックのテストを追加
packages/extension/src/new_command_hub.tsx	新 Hub 向け content script エントリを追加
packages/extension/src/hooks/useCommandHubBridge.ts	Hub ブリッジを簡素化（installedIds の push）
packages/extension/src/components/option/editor/CommandEditDialog.tsx	変更検知を helper 関数へ移譲
packages/extension/src/components/option/editor/commandChangedDetector.ts	変更検知ロジックを新規追加
packages/extension/src/components/option/editor/commandChangedDetector.test.ts	変更検知のユニットテストを追加
packages/extension/src/components/commandHub/CommandHub.tsx	useCommandHubBridge 呼び出しを削除
packages/extension/src/background_script.ts	Hub handler 登録・外部 listener 初期化・レスポンス形変更
packages/extension/manifest.json	新 Hub 用 content script と externally_connectable を追加

[claude]

コードレビュー — PR #398

このPRは、Selection Command Hub との通信を postMessage ベースから chrome.runtime.externally_connectable / chrome.runtime.onMessageExternal ベースへ移行するものです。設計の方向性は妥当で、テストカバレッジも追加されています。前回のレビューコメントへの対応も確認しました。以下に残存する懸念点を記載します。

---

🔴 クリティカル

1. NEW_HUB_URL のデフォルトがローカルホストになっている

ファイル: packages/extension/src/const.ts:387

export const NEW_HUB_URL =
  import.meta.env?.VITE_NEW_HUB_URL ?? "http://localhost:3000"

VITE_NEW_HUB_URL 環境変数が設定されていない場合、本番ユーザー全員に対して Hub が http://localhost:3000 を向いてしまいます。以前のデフォルト値 (https://selection-command-hub.pages.dev) に戻すか、正しい本番URLに変更してください。

2. manifest.json に http://localhost:3000 が本番マニフェストに含まれている

ファイル: packages/extension/manifest.json:11-18, 26-29

"matches": [
  "https://selection-command.com/*",
  "https://selection-command-hub.siro-cola.workers.dev/*",
  "http://localhost:3000/*"  // ← 本番ビルドに含めるべきでない
]

externally_connectable と content_scripts の両方に http://localhost:3000 が含まれています。これはローカルで動く任意のサービスが拡張機能の外部メッセージAPIにアクセスできることを意味します。開発用URLはビルド設定で分岐するか、開発マニフェストを別途用意してください。

---

🟡 中程度の問題

3. デバッグ用 console.log が残っている

ファイル: packages/extension/src/services/hub/background.ts:1099

console.log("[onMessageExternal] Received message:", message)

本番コードに console.log が残っています。削除するか、console.debug に変更して開発時のみ出力されるようにしてください。

4. Ipc.callListener の型引数が実際のレスポンス型と不一致

ファイル: packages/extension/src/services/hub/background.ts:1102, 1113

Ipc.callListener<{ command: string }, boolean>(BgCommand.addCommand, { command })
// 実際のレスポンスは { result: boolean, error?: string } だが型は boolean

background_script.ts で response({ result: true, install_id: clientId }) / response({ result: false, error: ... }) が返るようになりましたが、Ipc.callListener の型引数が boolean のままです。型を正しく { result: boolean; error?: string; install_id?: string } に更新してください。

5. hubOrigin がリクエストごとに再計算されている

ファイル: packages/extension/src/services/hub/background.ts:1094

function onMessageExternal(...): boolean {
  const hubOrigin = new URL(NEW_HUB_URL).origin  // 毎回計算される
  ...
}

useCommandHubBridge.ts と同様に、モジュールトップレベルで一度だけ計算するべきです:

const hubOrigin = new URL(NEW_HUB_URL).origin

6. shareCommandToHub (hubShare.ts) のエラーが無視される

ファイル: packages/extension/src/services/hubShare.ts:74

Ipc.send(BgCommand.shareCommandToHub, input)
return true

Ipc.send の戻り値（Promise）が捨てられており、失敗しても UI 側は成功したと認識します。.catch() でログ出力するか、呼び出し元に結果を通知できる形に変更することを推奨します:

void Ipc.send(BgCommand.shareCommandToHub, input).catch((err) => {
  console.error("[HubShare] Failed to share command:", err)
})

---

🟢 軽微な問題 / 改善提案

7. commandChangedDetector.ts の JSON.stringify 比較はキー順序に依存する

ファイル: packages/extension/src/components/option/editor/commandChangedDetector.ts:369-371

const { openMode: _a, ...pao } = currentPageActionOption ?? {}
const { openMode: _b, ...cmdPao } = command.pageActionOption
return JSON.stringify(pao) !== JSON.stringify(cmdPao)

オブジェクトのキー順序が異なる場合に誤検知する可能性があります（例: { a: 1, b: 2 } vs { b: 2, a: 1 }）。元のコードからの踏襲ですが、JSON.stringify によるディープ比較は将来のバグの温床になりえます。ユーティリティライブラリの isEqual や再帰的な比較関数の利用を検討してください。

8. useCommandHubBridge フックの役割が変わっているのに名前・コメントが残っている

ファイル: packages/extension/src/hooks/useCommandHubBridge.ts

フックは SyncInstalledCommand の proactive push のみを担当するようになりましたが、フック名 useCommandHubBridge はまだ「ハブとの橋渡し全般」を示唆しています。AddCommand / DeleteCommand のハンドリングが hub/background.ts に移ったことが分かるよう、フック名（例: useHubCommandSync）かコメントを更新することで、次の開発者が混乱せずに済みます。

9. new_command_hub.tsx で DOM に直接 append している

ファイル: packages/extension/src/new_command_hub.tsx:8-9

const rootDiv = document.createElement("div")
document.body.appendChild(rootDiv)

コンテンツスクリプトとしては一般的なパターンですが、ページによっては document.body が存在しないタイミングで実行される可能性があります（DOMContentLoaded 後に実行されるなら問題なし）。manifest の run_at 設定との整合を確認してください。

---

良い点

• removeCommand のロジックが guard clause パターンで整理され、可読性が向上した（background_script.ts:251-110）
• hasCommandChanged の抽出によりテスト可能性が向上し、ユニットテストも充実している（commandChangedDetector.test.ts）
• onMessageExternal でオリジン検証が適切に実装されている（hub/background.ts:1096）
• shareCommandToHub での tabId ベースのポート検証により、意図しないタブからの接続を防止できている（hub/background.ts:1033-1034）
• catch ブロックでも removeListener を呼ぶようになったことでリスナーリークが修正された

---

まとめ: http://localhost:3000 がデフォルト/本番マニフェストに含まれている点（問題1・2）は、リリース前に必ず修正が必要です。その他の問題は品質改善として対応をご検討ください。

[ujiro99]

@copilot
claudeのレビューコメントのうち、以下を修正してください。

4. Ipc.callListener の型引数が実際のレスポンス型と不一致 ファイル: packages/extension/src/services/hub/background.ts:1102, 1113

Ipc.callListener<{ command: string }, boolean>(BgCommand.addCommand, { command })
// 実際のレスポンスは { result: boolean, error?: string } だが型は boolean
background_script.ts で response({ result: true, install_id: clientId }) / response({ result: false, error: ... }) が返るようになりましたが、Ipc.callListener の型引数が boolean のままです。型を正しく { result: boolean; error?: string; install_id?: string } に更新してください。

5. hubOrigin がリクエストごとに再計算されている
   ファイル: packages/extension/src/services/hub/background.ts:1094

function onMessageExternal(...): boolean {
const hubOrigin = new URL(NEW_HUB_URL).origin // 毎回計算される
...
}
useCommandHubBridge.ts と同様に、モジュールトップレベルで一度だけ計算するべきです:

const hubOrigin = new URL(NEW_HUB_URL).origin
6. shareCommandToHub (hubShare.ts) のエラーが無視される
ファイル: packages/extension/src/services/hubShare.ts:74

Ipc.send(BgCommand.shareCommandToHub, input)
return true
Ipc.send の戻り値（Promise）が捨てられており、失敗しても UI 側は成功したと認識します。.catch() でログ出力するか、呼び出し元に結果を通知できる形に変更することを推奨します:

void Ipc.send(BgCommand.shareCommandToHub, input).catch((err) => {
console.error("[HubShare] Failed to share command:", err)
})

[Copilot]

@copilot
claudeのレビューコメントのうち、以下を修正してください。

...

修正対象のリストが空のようです。修正してほしいClaudeのレビューコメントを教えていただけますか？

[ujiro99]

@copilot
以下のレビュー・コメントの修正をお願いします。

4. Ipc.callListener の型引数が実際のレスポンス型と不一致 ファイル: packages/extension/src/services/hub/background.ts:1102, 1113
   Ipc.callListener<{ command: string }, boolean>(BgCommand.addCommand, { command })
   // 実際のレスポンスは { result: boolean, error?: string } だが型は boolean
   background_script.ts で response({ result: true, install_id: clientId }) / response({ result: false, error: ... }) が返るようになりましたが、Ipc.callListener の型引数が boolean のままです。型を正しく { result: boolean; error?: string; install_id?: string } に更新してください。

hubOrigin がリクエストごとに再計算されている
ファイル: packages/extension/src/services/hub/background.ts:1094
function onMessageExternal(...): boolean {
const hubOrigin = new URL(NEW_HUB_URL).origin // 毎回計算される
...
}
useCommandHubBridge.ts と同様に、モジュールトップレベルで一度だけ計算するべきです:

const hubOrigin = new URL(NEW_HUB_URL).origin
6. shareCommandToHub (hubShare.ts) のエラーが無視される
ファイル: packages/extension/src/services/hubShare.ts:74

Ipc.send(BgCommand.shareCommandToHub, input)
return true
Ipc.send の戻り値（Promise）が捨てられており、失敗しても UI 側は成功したと認識します。.catch() でログ出力するか、呼び出し元に結果を通知できる形に変更することを推奨します:

void Ipc.send(BgCommand.shareCommandToHub, input).catch((err) => {
console.error("[HubShare] Failed to share command:", err)
})

[claude]

コードレビュー — PR #398: Selection Command Hub との通信改善

概要

window.postMessage（コンテンツスクリプト）から chrome.runtime.onMessageExternal（バックグラウンドスクリプト）への移行は、アーキテクチャ上の大きな改善です。externally_connectable を使うことで、オリジン検証をブラウザ拡張機能レベルで行えるようになり、セキュリティが向上しています。

---

良い点

• セキュリティの強化: externally_connectable + chrome.runtime.onMessageExternal への移行により、オリジン検証がChrome自身で行われるようになった
• エラーレスポンスの統一: boolean から { result: boolean, error?: string } への変更で、デバッグ性が向上した
• テストカバレッジ: hub/background.test.ts（19テスト）と commandChangedDetector.test.ts（9テスト）が追加されており、主要なシナリオがカバーされている
• hasCommandChanged の抽出: ロジックの分離とテスト可能性の向上

---

問題点・改善提案

🔴 重要

1. console.log がデバッグ用のまま残っている
packages/extension/src/services/hub/background.ts:1099（diff上の行）:

console.log("[onMessageExternal] Received message:", message)

本番コードに console.log は不要です。受信したメッセージの内容がユーザーのブラウザコンソールに漏れます。削除してください。

2. 型の不整合: Ipc.callListener の型引数
packages/extension/src/services/hub/background.ts:

// AddCommand
Ipc.callListener<{ command: string }, boolean>(BgCommand.addCommand, { command })

// DeleteCommand  
Ipc.callListener<{ id: string }, boolean>(BgCommand.removeCommand, { id })

戻り値の型が boolean となっていますが、実際には background_script.ts の addCommand / removeCommand は { result: boolean, error?: string } を返します。型引数は実際のレスポンス型に合わせる必要があります。

---

🟡 中程度

3. window.postMessage による SyncInstalledCommand の整合性
packages/extension/src/hooks/useCommandHubBridge.ts:

window.postMessage(
  { action: "SyncInstalledCommand", installedIds: ids },
  hubOrigin,
)

新Hub側は chrome.runtime.sendMessage（外部メッセージ）を使う設計に変わりましたが、SyncInstalledCommand のプロアクティブ送信はまだ window.postMessage を使っています。新しいHub側がこのイベントを window.addEventListener('message', ...) で受信できるか確認が必要です。RequestInstalledCommand は onMessageExternal で処理されるようになりましたが、プロアクティブなプッシュは従来のまま残っています。

4. vite.config.ts の externally_connectable に null チェックがない
packages/extension/vite.config.ts:

externally_connectable: {
  ...manifest.externally_connectable,
  matches: manifest.externally_connectable.matches.filter(...)
}

manifest.externally_connectable が undefined の場合（将来的にmanifestから削除された場合など）にランタイムエラーが発生します。オプショナルチェーンを使うか、存在確認を追加することを推奨します。

5. isSharing ガードの削除
packages/extension/src/services/hubShare.ts の旧実装にあった isSharing ガードが削除されました。ユーザーがコマンド共有ボタンを連打した場合、複数のタブが開かれる可能性があります。バックグラウンド側でのデバウンス処理、あるいは呼び出し元でのガード処理が必要か検討してください。

---

🟢 軽微

6. install_id キー名の一貫性
packages/extension/src/background_script.ts:

response({ result: true, install_id: clientId })

PR説明では install_id → client_id のリネームが挙げられていますが、レスポンスのキー名は install_id のままです（変数名 clientId は変更済み）。Hub側がこのキーを期待しているなら意図的と思いますが、PR説明と一致させるか、コメントで意図を明記することを推奨します。

7. shareCommandToHub のタイムアウト時の応答欠如
packages/extension/src/services/hub/background.ts:

if (retries > MAX_RETRIES) {
  cleanup()
  console.error("[Hub] Hub page did not respond to share-command in time.")
  return  // response() が呼ばれない
}

最大リトライ超過時に response() が呼ばれていません。呼び出し元のIPCリスナーが応答待ちのままになる可能性があります。タイムアウト時にも response(false) を返すことを検討してください。

8. テストの as any キャスト多用
packages/extension/src/services/hub/background.test.ts:

vi.mocked(Ipc.callListener).mockResolvedValue({ result: true } as any)
vi.mocked(Storage.getCommands).mockResolvedValue([{ id: "a" }] as any)

as any の多用はテストの型安全性を下げます。適切なモック型定義を使うことで、型エラーを早期に発見できるようになります。

---

まとめ

アーキテクチャの方向性は正しく、セキュリティ観点でも優れた改善です。本番リリース前に console.log の削除と型引数の修正（特に Ipc.callListener の戻り値型）は対応してください。SyncInstalledCommand のプロアクティブ送信の扱いについても、新Hub側の実装と整合しているか確認することを推奨します。

[Copilot]

@copilot
以下のレビュー・コメントの修正をお願いします。

...

コミット 9a92e95 で以下の3点を対応しました：

1. Ipc.callListener 型修正 (hub/background.ts): boolean → { result: boolean; error?: string; client_id?: string } / { result: boolean; error?: string } に更新
2. hubOrigin 最適化 (hub/background.ts): onMessageExternal 内での毎回計算をやめ、モジュールトップレベルで const hubOrigin = new URL(NEW_HUB_URL).origin として一度だけ計算するよう変更
3. hubShare.ts エラーハンドリング: Ipc.send(...) → void Ipc.send(...).catch((err) => { console.error("[HubShare] Failed to share command:", err) }) に変更

また 9b3a15f でエラーケースのテスト（SH-08）も追加し、.catch() ハンドラが正しく動作することを検証しています。