VERTICAL TABS

別のマシンに入れる

Chrome のサイドパネルに、ページのプレビュー付きの縦タブを出す拡張機能です。

ウェブストアから入れられます。 Chrome ウェブストアの掲載ページを開いて「Chrome に追加」を押すだけです。 更新も Chrome が自動でやります。下の手順は不要なので、 手動で入れたい場合・開発版を試したい場合だけ読んでください。

手動で入れる場合

ウェブストアを使わずに入れる手順です。開発版を試すとき、社内ポリシーでストアが使えないとき、 自分でビルドしたものを入れたいときに。所要 3 分、ビルドは要りません。

zip を取ってくる

リリースページに zip が置いてあります。 gh が入っているマシンなら、そのまま落とせます。

gh release download v1.0.0 \
  --repo d4rulyn/vertical-tabs \
  --pattern '*.zip'

ブラウザから取る場合は Releases を開いて zip をクリックします。

手元にリポジトリがあるなら、自分で作ることもできます。Docker で 1 コマンド、 ホストには何も入りません。
docker run --rm --user "$(id -u):$(id -g)" -v "$PWD":/work -w /work \
  python:3.12-slim python tools/package.py
同じコミットからは常に同じバイト列になるので、表示される sha256 を リリースノートの値と突き合わせれば取り違えを検出できます。

展開して、置き場所を決める

zip を展開すると manifest.json が直下にあるフォルダができます。 このフォルダは消さないでください。Chrome は読み込んだ場所をそのまま参照し続けるので、 デスクトップの一時フォルダではなく、残しておける場所に置きます。

例: ~/chrome-extensions/vertical-tabs/

Chrome に読み込む

アドレスバーに chrome://extensions と入力 → 右上のデベロッパーモードをオン → パッケージ化されていない拡張機能を読み込む → 展開したフォルダを選びます。

読み込めたら、ツールバーのパズルのアイコンから 縦型タブ をピン留めしておくと、 アイコンのクリックでパネルを開閉できます。Ctrl+Shift+E でも開閉します。

サイトへのアクセスを「すべてのサイト」にする

ここを飛ばすとプレビューが 1 枚も出ません。 Chrome はスクリーンショットの取得にホストへのアクセス権を要求するためで、拡張側では回避できません。

chrome://extensions → この拡張の詳細 → サイトへのアクセス → すべてのサイト。

「クリックしたとき」「特定のサイト」のままだと、Chrome がすべてのキャプチャを拒否します。 その場合はパネルに黄色の帯が出て、各カードにも理由が表示されます。

パネルを右側に出す

サイドパネルの左右は Chrome 側の設定で、拡張からは動かせません。 左に出ている場合は、chrome://settings/appearance → サイドパネル → 右側に表示 を選びます。

ページ 縦タブ
右側に出た状態。パネルの最小幅 360px は Chrome 側の固定値で、拡張からは変えられません。

好みに合わせる

パネル右上の歯車から。よく変えるのはこのあたりです。

プレビューに写すもの — 既定は「ページの先頭」。ページの途中で再読み込みしても、 ヘッダーが写ったままになります。
列数 — 1〜5。カードの幅 — 160px にすると最小幅でも 2 列入ります。
ツール — 右の列に出す道具を選べます。全部外すと列ごと消えます。

更新するとき

ウェブストアから入れた場合は何もしなくて構いません。 新しい版を公開すると Chrome が自動で更新します。以下は手動で入れた場合の手順です。

新しい zip に入れ替えて、読み込み直す

同じフォルダの中身を新しい zip で置き換え、chrome://extensions で この拡張の更新(再読み込み)ボタンを押します。

そのあと、サイドパネルを一度閉じて開き直してください。 拡張を再読み込みすると、開いたままのパネルは Chrome に破棄されます(実測)。 上のタイトルバーは Chrome 側の UI なので残り、中身だけが消えて真っ白に見えます。壊れてはいません。

うまくいかないとき

パネルが真っ白

拡張を再読み込みした直後なら、パネルを閉じて開き直してください。上に書いたとおりの正常な挙動です。 それでも白いままなら chrome://extensions でエラーボタンが 出ていないか確認し、もう一度読み込み直してから、パネルを開き直します。

プレビューが 1 枚も出ない

ほぼ確実にサイトへのアクセスが「すべてのサイト」になっていません(手順 4)。 管理された端末では runtime_blocked_hosts ポリシーで ブロックされていることもあります。

特定のタブだけプレビューが出ない

URL を見てください。chrome://、Chrome ウェブストア、他の拡張のページ、 data:、about:blank は Chrome が撮影を許しません。 file:// は拡張の詳細ページで「ファイルの URL へのアクセスを許可する」が必要です。 どれに当たるかは、カードにカーソルを合わせると出ます。

プレビューの更新が遅い / 追いつかない

Chrome のスクリーンショット API には毎秒 2 回という制限があり(実測値)、 拡張はそれを超えないよう直列に撮っています。タブを立て続けに切り替えると、 最後の 1 枚が出るまで 1 〜 2 秒かかります。これは仕様上の下限です。

パネルが太すぎる

サイドパネルの最小内幅 360px は Chrome に固定値で埋め込まれていて、拡張からは下げられません。 細くしたい場合は、パネル下部の切り離しボタンで別ウィンドウとして開いてください。 こちらは 260px から使えます。