0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ClaudeのChatとCoworkが統合されて不便なので、分離UIを復活させてみた

0
Posted at

この記事は自ブログからの転載です。
元記事: ClaudeのChatとCoworkが統合されて不便なので、分離UIを復活させてみた

ClaudeのChatとCoworkが統合されて不便なので、分離UIを復活させてみた【Firefox・Chrome・Desktop/2026年10月】

この記事はChatGPTなどの生成AIを利用して執筆しています。調査・実装にもAIを利用していますが、実際の画面操作や動作検証は手元の環境で行い、確認できた範囲を区別して記載しています。

2026年10月9日時点の記録です。 Anthropic非公式の実験であり、Claudeのアップデートで動作しなくなる可能性があります。

ClaudeのChatとCowork、いつの間にか統合されましたね。

これ、個人的には結構困っていました。普通に質問したいだけなのにCowork側で作業が始まったり、意図していないファイル整理に話が進んだり。単に文章で回答してくれればいいのに、作業環境を立ち上げて調査を始められると、時間も使用量も余計にかかります。スマートフォンからも作業を継続できるのは便利ですが、必要ないときまでそういうセッションを作ってほしいわけではありません。

ChatはChat、CoworkはCowork。使うかどうかは自分で決めたい。

ということで、統合前の切り替えUIを戻せないか調べていたら、Feature Flagを1つ変更するだけで、分離表示に戻せることが分かりました。拍子抜けするほど簡単でした。……発見した時点では。

その後、Firefoxでの検証からChrome対応、Claude Desktopへの組み込み、別の自作拡張との共存までやったので、今回はその記録です。

まず使い方をまとめ、後半で通信解析・実装方法・実機検証について詳しく書きます。とりあえず動かしたいだけの方は前半だけで十分です。

coworkボタン復活!

最初に結論

作成したのは Claude Split UI という非公式の拡張機能です。

  • 統合されていたChat / Coworkの切り替えを、確認済みの環境で分離表示へ戻す
  • Firefox・ChromeのWeb版、およびWindows版Claude Desktopで基本動作を確認
  • 既存のClaudeアカウントやサブスクリプションはそのまま使用
  • Claude本体の実行ファイルやapp.asarを書き換えず、無効化・解除できる
  • Claude Desktopでは別に作成したCtrl+Enter送信ツールとも共存可能

GitHub: zawa356/claude-split-ui
ダウンロード: 最新のReleases
日本語README: 導入手順と対応状況

これは画面の切り替え方を戻すツールです。権限のない機能を有効化するものでも、以前のCoworkのバックエンドや実行環境を完全に復活させるものでもありません。そこは最初に明確にしておきます。

確認した環境

対象 2026年10月9日時点の確認結果
Firefox 157.0.1 一時拡張の導入で分離、削除して再読込すると統合表示に復帰
Chrome WXT版拡張の手動導入・無効化による分離/復帰を確認
Claude Desktop / Windows 11 Microsoft Store(MSIX)版 2.31226.0.0 で分離/復帰を確認
Claude Desktop / Linux 配布・CI上の検査はあるが、実機動作は未確認
macOS 今回のDesktop用配布の対象外

すべてのアカウントや将来のバージョンで動くという意味ではありません。

導入方法

Firefoxの場合

  1. Releasesからclaude-split-ui-<バージョン>-firefox.zipを取得して展開します。
  2. アドレスバーにabout:debugging#/runtime/this-firefoxと入力します。
  3. 「一時的なアドオンを読み込む」から、展開したフォルダー内のmanifest.jsonを選択します。
  4. Claude Webを再読み込みします。

うまくいけば、ChatとCoworkの切り替えが表示されます。

注意: 現在のFirefox版は一時インストールによる開発者向けの配布です。Firefoxを再起動すると一時アドオンは解除されます。AMOで署名された正式なアドオンではありません。

解除するときはabout:debuggingから一時アドオンを削除し、Claudeのページを再読み込みしてください。

Chromeの場合

  1. Releasesからclaude-split-ui-<バージョン>-chrome.zipを取得し、展開します。
  2. chrome://extensions/を開き、デベロッパーモードを有効にします。
  3. 「パッケージ化されていない拡張機能を読み込む」で、manifest.jsonがあるフォルダーを選択します。
  4. Claude Webを再読み込みします。

元に戻す場合は拡張を無効化または削除して再読み込みします。Chrome Web Storeでの配布ではありません。

Claude Desktop(Windows)の場合

  1. Releasesからclaude-split-ui-<バージョン>-desktop.zipを取得して展開します。
  2. 中のinstall.batを実行します。管理者権限は不要です。
  3. Claudeをタスクトレイから完全に終了させ、通常のアイコンから起動し直します。
  4. 入力欄の「+」付近にChat / Coworkの切り替えが出るか確認します。

uninstall.batで解除できます。解除後もClaudeを完全終了・再起動してください。診断はdiagnose.bat、読み込み枠の再生成はrepair.batです。

導入スクリプトの詳細や最新の制約はREADMEを優先してください。特に以前のバージョンから更新する場合は、古い解除スクリプトではなく新しい配布物を使用します。


そもそも、なぜ戻したかったのか

今回の不満は「新しい画面が気に入らない」という見た目だけの話ではありません。

自分の使い方だと、普通のChatは技術的な質問や調べ物、文章の相談をする場所。一方Coworkは、ファイルを扱わせたりPC上で作業させたりする必要があるときに、明示的に利用したい機能です。

この2つが統合されると、ちょっとした質問でもCowork的な作業に移行することがありました。場合によっては頼んでいないファイル整理の話まで進んでしまい、「いや、そこまでしなくていいんだけど……」という状態になります。

Cowork自体が嫌いなわけではありません。実際、必要なときには便利です。ただ、使い分けるための境界がほしい。

それに、たまたま別のClaude Teamアカウントで確認したところ、そちらには従来の分離UIが残っていました。

同じClaudeなのに、アカウントによって画面が違う。だったら旧UIのコードが完全に削除されたわけではなく、機能フラグで表示を切り替えている可能性があるのでは?

ここから調査が始まります。

1. まずFirefoxで通信を調べる

ElectronのDesktopアプリを最初から改造するよりも、Web版をブラウザーの開発者ツールで調べた方が楽です。ということで、Firefoxから始めました。

Firefoxの開発者ツールに慣れていたわけではないので、このあたりはChatGPTに調査を手伝ってもらいながら進めています。

1-1. Network Monitorで起動時の通信を取得

再現したい場合は、次のような手順です。

  1. 統合UIになっているアカウントでhttps://claude.ai/newを開きます。
  2. F12で開発者ツールを開き、「ネットワーク」タブへ移動します。
  3. 必要に応じてキャッシュを無効化し、通信ログをクリアしてページを再読み込みします。
  4. app_startという文字列を含むリクエストを探します。
  5. レスポンスのJSONと、ページHTMLの起動時スクリプトを確認します。

実際の検証では、次のような同一オリジンのAPIが呼ばれていました。

GET https://claude.ai/edge-api/bootstrap/<organization-uuid>/app_start
    ?statsig_hashing_algorithm=djb2
    &growthbook_format=sdk
    &...

ここでの<organization-uuid>は説明用の伏せ字です。実際のアカウントのIDを公開する必要はありません。また、URLに付くパラメーターは将来変更される可能性があります。

最初はHARも取得して内容をAIと一緒に分析しました。ただし、HARにはCookie、認証ヘッダー、各種IDなどが含まれる可能性があります。そのまま公開したり、Issueへ貼ったりするのは避けてください。AIへ渡す場合も、サービスや利用環境の取り扱い条件を確認し、必要な範囲に絞るべきです。

1-2. GrowthBookのFeature Flagを見つける

起動時のJSONを調べると、GrowthBook形式のFeature定義の中に、数値のキー1174351393が見つかりました。

実データから対象部分だけを抜き出して簡略化すると、構造は次のようなものです。これは説明用のサンプルであり、実際のレスポンス全文ではありません。

{
  "1174351393": {
    "defaultValue": true,
    "rules": [
      { "force": true }
    ]
  }
}

一見すると、defaultValueだけfalseにすればよさそうです。ただし、rulesにはforceという値があります。デフォルトを変更しても、適用中のルールによって別の値が選ばれる可能性があります。

そこでdefaultValueだけでなく、Boolean型のrules[].forceも変更して挙動を見ることにしました。

1-3. Network Overrideで本当に切り替わるか試す

FirefoxのNetwork Monitorには、サーバーのレスポンスをローカルファイルに差し替えるNetwork Overrideがあります。Firefox 137以降で使える機能です。

調査時には次の流れで試しました。

  1. Network Monitorで対象のapp_startリクエストを右クリックします。
  2. Set Network Overrideを選び、レスポンス内容をローカルファイルへ保存します。
  3. そのファイルの対象Featureだけを編集します。
  4. defaultValueとrules[].forceをfalseにして保存します。
  5. ページを再読み込みしてUIを確認します。

Firefoxの操作自体はMozillaのNetwork Overrides解説にも記載があります。Overrideはタブ単位で、開発者ツールを閉じれば永続化されません。

対象部分は次の状態にします。

{
  "1174351393": {
    "defaultValue": false,
    "rules": [
      { "force": false }
    ]
  }
}

もちろん実際は、レスポンス全体を保ったまま対象部分だけ書き換えます。サンプルJSONだけをレスポンスとして返してもClaudeは起動できません。

すると、分離されていた頃のChat / Cowork切り替えが表示されました。

えっ、これだけ?

と思いましたが、偶然の表示崩れではないかを確認する必要があります。

1-4. A/B/A/Bで検証する

同じアカウント・同じブラウザーで値を切り替え、結果を記録しました。

試行 defaultValue rules[].force 画面
A:変更前 true true 統合UI
B:両方変更 false false 分離UI
A相当:ルールを戻す false true 統合UI
B:再度変更 false false 分離UI

この結果から、少なくとも当時のアカウントとビルドでは、対象Featureのルール設定がUI切り替えに効いていると判断できます。

ちなみにclassic_mode_availableやshowCoworkTabといった、それらしい名前の値もありました。しかし、それらが今回の表示を決める要因だと立証できたわけではありません。成功した変更はあくまで1174351393のFeature定義に限定しています。

Coworkを選ぶと/cowork/へ移動し、Cowork用の画面やタスク一覧が表示されました。簡単なMarkdownファイル作成も実行できました。ただし、この結果だけで「統合前のCowork実行基盤まで完全に戻った」とは言えません。確認できたのは主にUIの分離です。

2. 一時的な差し替えからWebExtensionへ

Network Overrideでは、開発者ツールを開いてファイルを管理し続ける必要があります。毎回使うものとしてはさすがに面倒です。

そこで、レスポンスをブラウザー内で動的に加工するWebExtensionを作りました。

2-1. なぜdocument_startなのか

最初に引っかかったのが、差し込むタイミングです。

HTMLを調べると、Claudeはアプリ本体の大きなJavaScriptが起動する前に、インラインスクリプトからbootstrapの取得を始めていました。

概念的には次の構造です。

// Claudeの動作を説明するための擬似コード(原文の転載ではありません)
window.__BOOTSTRAP_PRELOAD__ = {
  promise: fetch('/edge-api/bootstrap/.../app_start', {
    credentials: 'include'
  })
};

DOMContentLoadedを待ってからfetchをフックしても、もう遅い。そこでManifest V3のcontent scriptを、document_startかつMAIN worldで実行します。

// apps/browser-extension/entrypoints/claude.content.ts より
export default defineContentScript({
  matches: ['https://claude.ai/*'],
  runAt: 'document_start',
  world: 'MAIN',
  allFrames: false,
  main() {
    installFetchHook(window);
  }
});

普通の拡張機能のcontent scriptは、WebページとJavaScriptの実行環境が分離されています。今回はページ本体が呼ぶwindow.fetchを置き換える必要があるため、同じ実行環境となるMAINを使用しています。

2-2. 何でも書き換えない

ここでやりたかったのは、Claudeの通信を横取りすることではありません。最新の正規レスポンスから、目的のFeatureだけをその場で変更することです。

現在の実装は、おおむね次の手順で動きます。

Claudeのページがfetch()を呼ぶ
  ├─ app_start以外 → 元のfetchをそのまま実行
  └─ 同一オリジンのapp_start
       ↓
     正規のレスポンスを取得
       ↓
     JSONをコピーしてFeature 1174351393を探す
       ├─ 形式が違う/対象なし/取得失敗 → 元のレスポンスを返す
       └─ 対象あり
            ↓
          defaultValue=false
          Boolean型のrules[].force=false
            ↓
          変更したJSONをResponseとして返す

実装の核はpackages/core/src/index.mjsです。

たとえばFeatureの変更部分は、実際には次のような処理になっています(要点を抜粋)。

const copy = structuredClone(root);
visitDefinitions(copy, definition => {
  definition.defaultValue = false;
  for (const rule of definition.rules) {
    if (rule && typeof rule.force === 'boolean' && rule.force !== false) {
      rule.force = false;
    }
  }
});

visitDefinitions側でも対象キーとデータ型を検査しています。変更対象でない通信・項目はそのまま通し、想定外のJSONなら加工しません。取得した認証情報やレスポンス全文を保存・外部送信する機能も設けていません。

余談ですが、Network Override用に取得した実際のbootstrap JSONを、拡張機能の中へ固定データとして同梱するのは避けています。ユーザーや時点によって異なる設定を巻き込むうえ、認証情報が混ざる危険もあるからです。

2-3. FirefoxからChromeへ

最初にFirefox用のManifest V3によるPoCを作り、拡張を入れる→分離する→外す→統合に戻るというA/B/Aを確認しました。Network Overrideを解除した状態で試験しているので、前段の差し替えが残っていたわけではありません。

その後、WXTを使ってFirefoxとChromeのビルドを共通化。変換処理はpackages/coreに切り出し、ブラウザーごとの拡張から同じ処理を呼び出す形にしました。

単体テストや模擬ブラウザーでの確認に加えて、Firefox・Chromeの両方で実際に拡張を読み込み、分離表示と解除後の復帰を確認しています。

なお、CIが通ったからといってClaude Webとの組み合わせが保証されるわけではありません。この点は実機試験と区別しています。

3. Desktop版にも適用する

さて、ここまで来るとDesktop版でも使いたくなります。

実は、この少し前に別の不満からClaude DesktopのEnterキー動作を変更するツールを開発していました。その過程で、Claude Desktop内部にあるReact DevTools用の拡張読み込み経路を見つけていたのです。

ここが今回のDesktop対応に効きました。

3-1. Web版のClaudeがそのまま載っている

Windows版Claude DesktopはElectron製です。app.asarをコピーして読み取り専用で解析したところ、通常のチャット画面ではhttps://claude.aiを表示する構成が確認できました。

したがって、Claude Desktopのメインプロセスを改造するより、実際のWeb画面へChrome用のcontent scriptを読み込ませる方が変更範囲を小さくできます。

3-2. REACT_PROFILE=1とReact DevToolsの読み込み枠

対象ビルドには、起動時にREACT_PROFILE環境変数を確認し、1ならloadReactDevTools()を実行する分岐がありました。

さらに、所定の拡張フォルダーが存在すると、Electronのsession.defaultSession.loadExtension()で読み込む実装になっています。

ユーザー環境変数 REACT_PROFILE=1
             ↓
Claude Desktopの起動処理
             ↓
React DevTools用の拡張フォルダーを確認
             ↓
%APPDATA%\Claude\extensions\fmkadmapgofadopljbjfkapdkoienihi
             ↓
Electron session.defaultSession.loadExtension()
             ↓
claude.ai のWebContentsへcontent scriptを適用

これはClaudeの非公開の開発用読み込み経路を利用したもので、公式の「任意のChrome拡張機能をインストールする機能」ではありません。React DevToolsのIDは読み込み先のフォルダー名として利用していますが、React DevToolsそのものを同梱しているわけではありません。

また、REACT_PROFILEはユーザー環境変数です。他の用途と競合する場合があるため、既存設定や本物のReact DevToolsがある環境では、インストーラーが勝手に上書きしないようにしています。

3-3. Windows実機でA/B/Aを確認

Windows 11、Claude Desktop 2.31226.0.0(Electron 44.4.3)で検証しました。

状態 結果
元の状態(Ctrl+Enter拡張のみ) 統合UI
Split UIのcontent scriptを追加 分離UI
元の構成に戻す 統合UI

差し替え時には、フックの内部カウンターでintercepted: 1、patched: 1、modifiedRules: 1も確認しています。Ctrl+Enter側の動作は維持されていました。

これでWebとDesktopの両方で、同じ基本処理を利用できると確認できました。

4. ところが、拡張を2つ入れられない

ここで別の問題が発覚します。

ClaudeのReact DevTools用の読み込み先は、実質的に1つの拡張フォルダーです。つまりSplit UIとCtrl+Enterがそれぞれ好き勝手に同じ場所へ書き込むと、後から入れたツールが前のツールを上書きしてしまいます。

かといってClaudeの実行ファイルやapp.asarを書き換える方式にはしたくありません。Microsoft Store版のMSIXは署名や配置の都合もあり、公式アプリを改造して別物を常用するのは避けたかったのです。

そこで作ったのが、3つ目のリポジトリである**claude-desktop-webext**です。

4-1. 共通ローダーの仕組み

各ツールは、自分の拡張だけを個別のフォルダーで保持します。ローダーはそれらのmanifest.jsonを検査し、content_scriptsや必要な権限をまとめた1つの生成マニフェストを作成します。

%LOCALAPPDATA%\ClaudeDesktopWebExt\web-extensions\
  ├─ claude-split-ui\       ← 個別のMV3拡張
  └─ claude-ctrl-enter\     ← 個別のMV3拡張
              ↓ 検証・統合(順序制御)
%APPDATA%\Claude\extensions\fmkadmapgofadopljbjfkapdkoienihi\
  ├─ manifest.json         ← ローダーが生成
  └─ ext\...               ← 各拡張のスクリプト
              ↓
         Claude Desktop

Split UIは起動直後のfetchを先回りしてフックしなければならないため、実行順を10、Ctrl+Enterを50に設定しています。

スロットのバックアップ、導入・解除時の状態管理、失敗時のロールバックもローダー側で行います。ツール同士が相手のファイルを直接触らずに済むのが大きいところです。

すでに似た目的でClaude-WebExtension-Launcherという先行プロジェクトもあります。ただし、こちらは改変したClaudeアプリを使う別方式。今回は公式のClaude Desktopをそのまま使いたかったので、読み込み先を共有するローダーを別に作りました。

ちなみに、このローダーは任意のChrome拡張を無条件に読み込める万能ランチャーではありません。安全に1つのManifestへ統合できる、対応したMV3 content scriptに範囲を限定しています。

4-2. 共存まで検証

WindowsのClaude 2.31226では、旧版のCtrl+Enter単独構成から共通ローダーへ移行したうえで、Split UIを追加しました。

その後、実機で次を確認しています。

  • Chat / Coworkの分離切り替えが表示される
  • Ctrl+Enterの「キー設定」がサイドバーに表示される
  • 保存してあったキー設定が残る
  • Enter改行とCtrl+Enter送信が引き続き動作する

これで、自分の使いたかった環境が一通り揃いました。

5. AIをどう使ったか

今回、実装の多くはAIの支援を受けて進めています。いわゆるバイブコーディングに近い進め方です。

ただし「AIに一言頼んだら完成した」という感じではありません。

調査の入口ではFirefoxの操作やHARの整理を手伝ってもらい、実装段階ではFeatureの変換ロジックやWebExtension化、Windows版との共通化、テストの構築などにAIを使いました。一方で、分離したか、解除して元に戻るか、Ctrl+Enterと同時に使えるかは実際の環境で確認しています。

また、途中には「Desktop版はapp.asarへパッチを当てればよいのでは」という設計案もありました。しかし、すでに別プロジェクトで見つけていた拡張の読み込み経路を使う方が、目的にも制約にも合っていました。技術的に可能そうな方法と、常用したい方法は別です。

今回の実装で大切だったのは、コードを書く量よりも何を変更したら何が変わったのかを切り分けることだった気がします。

6. 制約・注意点

項目 注意点
非公式実装 Anthropicとは無関係。非公開のフラグとDesktopの読み込み経路に依存
動作範囲 検証できたのは主に分離UIと画面遷移。旧バックエンドの完全復活ではない
Feature Flag 1174351393が変更・削除されれば動かなくなる可能性あり
Desktop 確認済みはWindows版2.31226。Linux実機は未確認
ブラウザー配布 現在は手動インストール。ストア署名済み拡張ではない
既存の拡張 React DevToolsなど同じ読み込み枠を使うものとは競合し得る
認証情報 HARやbootstrapレスポンス原本をそのまま公開・共有しない

利用する場合は配布物の内容を確認し、動かなければ解除してください。将来のメンテナンスは続けるつもりですが、動作を保証できるものではありません。

まとめ

個人アカウントとClaude TeamでUIが違うことから調べ始め、FirefoxのNetwork OverrideでFeature Flagを変更したら、Chat / Coworkを分離できました。

WebExtensionへ移してFirefox・Chromeに対応させ、さらに以前作ったCtrl+Enter拡張の仕組みを利用してWindows版Claude Desktopでも動かせました。最後は1つしかない拡張読み込み枠を共有するためのローダーまで作ることに。ちょっとした不満の解消にしては、ずいぶん大掛かりです。

とはいえ、使ってみた感想は「すごく便利になった!」というより、やっと普通に使えるようになったという感じです。自分が使いたいときだけCoworkを選べる。それだけの話ですが、自分にとってはそこが重要でした。

同じように統合UIが合わない方の参考になれば幸いです。

関連リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?