どうもこんにちは、いかがお過ごしでしょうか。
突然ですが、こんな経験ありませんか。
「あのサイト、ブックマークしたはずなのにどこに入れたっけ……」
保存した記憶はある。でもフォルダが多すぎてどこにあるか分からない。Chromeの標準ブックマークマネージャーを開いても、なんか使いにくい。
検索しようとしたらそもそも全フォルダを横断して検索できない。
あの煩わしさ、地味にストレスですよね。
そこで今回は、そんなブックマーク難民を救うために自分で作ったChrome拡張機能「Bookmark Viewer」を紹介します。
Kota
35歳の医療コンサルタント。とんねるめがほん運営。
9年間医療事務として外来・入院を担当。
毎月約9億円を請求していました。
現在は“医業経営コンサルタント”として活躍中。
投資もそこそこに継続中。米国株を主軸としてETFや不動産も少々投資しています。
趣味は読書・ギター・ドライブ・ダーツ。DJもたまにやります。
Twitterはこちら
Bookmark Viewer とは
一言でいうと、Chromeのブックマークをフルページでサクサク閲覧・整理できる拡張機能です。
ツールバーのアイコンをクリックすると新しいタブが開いて、こんな画面が表示されます。
カードグリッドで並んだブックマークが一目で見渡せます。
サイトのfaviconも表示されるので視覚的にも分かりやすい。
できること
リアルタイム検索
上部の検索ボックスにキーワードを入れると、ブックマーク名とURL両方をリアルタイムで絞り込んでくれます。大文字小文字は区別しないので、うろ覚えでもOK。
`Esc`キーで即座にクリアできるのも地味に便利です。
検索中はフォルダ分けを解除して全ブックマークをフラットに表示してくれるので、「どのフォルダに入れたか覚えてない」問題を完全に解決できます。
ドラッグ＆ドロップで並べ替え
カードを掴んでそのまま動かすだけで順番を変えたり、別のフォルダに移動したりできます。
- カードの左半分にドロップ → 前に挿入
- カードの右半分にドロップ → 後ろに挿入
- フォルダ見出しにドロップ → そのフォルダの末尾に移動
挿入位置はアクセントカラーの縦線で示してくれるので、「あれ、どこに入った？」という迷子も起きません。変更はChromeのブックマークに即時反映されます。
フォルダの折りたたみ
サブフォルダが増えてきたとき、見出しをクリックするだけで折りたたんで整理できます。`›` が横向きなら折りたたみ中、下向きなら展開中。シンプルです。
カードから直接編集・削除
カードにマウスを乗せると右端に 「 ⋮ 」 ボタン が出てきます。
- 名前を変更：カード上で直接テキスト入力できます。Enterで確定、Escでキャンセル。
- 削除：確認ダイアログが出るので誤操作の心配も少ない。
いちいちChromeの設定画面を開かなくていいのが楽です。
インストール方法
現在GitHubで公開しています。Chromeウェブストアへの対応は今後検討予定です。
リポジトリ：https://github.com/kota777777/bookmark-viewer
手順
- 上記リポジトリページを開き、「Code」→「Download ZIP」 でソースをダウンロード
- ZIPを解凍して、`bookmark-extension` フォルダを任意の場所に置く
- `chrome://extensions` を開く
- 右上の 「デベロッパーモード」 をオンにする
- 「パッケージ化されていない拡張機能を読み込む」 をクリック
- 解凍した `bookmark-extension` フォルダを選択
- ツールバーのパズルアイコン🧩から 「Bookmark Viewer」 をピン留めして完了
注意点：インストール後は`bookmark-extension`フォルダの場所を変えないでください。移動・削除すると拡張機能が無効になります。
技術的な話（ちょっとだけ）
外部ライブラリは一切使っていません。vanilla JSのみで書いています。
必要な権限は `bookmarks`（ブックマークの読み書き）と `tabs`（新しいタブを開く）の2つだけ。最新の Manifest V3 に対応しています。
「自分でカスタマイズしてみたい」という方にとっても、シンプルな構成なので手を入れやすいと思います。
終わりに
ブックマークって「保存する」ところまではみんなやるんですけど、「活用する」ところで止まりがちですよね。Bookmark Viewerはそこを変えるために作りました。
ぜひ試してみてください。
