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?

@Takinoi

Chromeブックマークをもっと賢く使う——フローティングパネル型拡張機能「Shiori（栞）」を作った話

0
Posted at

🎯 作った背景

Chromeのブックマーク、ちゃんと整理できていますか？

「ブックマークバーは常時表示したくない」「ブックマークマネージャーを開くと別タブに遷移して作業が途切れる」「どのフォルダに入れたか探すのが地味につらい」——そんな小さなストレスが積み重なって、ついに自作しました。

Shiori（栞） は、Alt+B 一発で呼び出せるフローティング型のブックマークマネージャーです。現在のページを邪魔せずパネルが浮かび上がり、検索・追加・編集・削除をすべてそこで完結できます。リンク切れチェック機能まで内蔵しているので、たまった古いブックマークの棚卸しにも使えます。

✨ デモ・主な特徴

Alt+B（Macは Option+Shift+B）を押すと、ページ右上にダークフロストガラス調のパネルがふわっと出現します。ドラッグで好きな位置へ移動できます。

特徴 内容
🪟 フローティング表示 タブ遷移なしで現在ページに重ねて表示
⌨️ キーボード完結 ↑↓・Enter・E・Delete でほぼ全操作可能
🔍 リアルタイム検索 タイトル・URLをインクリメンタル検索＋ハイライト
🔗 リンク切れチェック 並列8件でHTTP HEADチェック、Wayback Machineリンク付き
🎨 ダークフロストガラス UI インジゴアクセント（#6470F3）のモダンなデザイン

🗂 機能一覧

起動・表示

  • Alt+B でフローティングパネルを開閉（トグル）
  • ツールバーの栞アイコンクリックでも起動
  • ヘッダー部分をドラッグして任意の位置へ移動可能
  • Esc キーでいつでも閉じられる

検索・絞り込み

  • キーワード検索（タイトル・URLをリアルタイム絞り込み）
  • 一致文字列を黄色でハイライト表示
  • フォルダプルダウンで絞り込み（サブフォルダも再帰的に対象）
  • ↑↓キーで行移動、Enter で開く、E で編集モード起動

ブックマーク管理

  • 現在ページのタイトル・URL を自動入力して追加
  • タイトル・URL・フォルダをインライン編集
  • フォルダ間移動
  • 確認ダイアログ付き削除（誤削除防止）
  • 新規フォルダ作成
  • フォルダ行にマウスオーバー → 「＋」ボタンで直接追加

リンク切れチェック

  • HTTP HEAD リクエストで一括チェック（並列8件同時処理）
  • アニメーション付き進捗バーでリアルタイム確認
  • 結果の色分け表示
カラードット 意味
🟢 緑 HTTP 200 など正常
🔴 赤 エラー（4xx / 5xx）
🟠 橙 タイムアウト（10秒）
⚫ グレー 対象外（http以外など）
  • 結果サマリー（OK・エラー・タイムアウト・合計件数）を一覧表示
  • エラー優先ソートボタンで問題 URL を先頭に集約
  • 404 エラー行に Wayback Machine 検索リンクを自動表示

⌨️ キーボードショートカット一覧

キー 動作
Alt+B パネル開閉
Esc パネルを閉じる（編集中はキャンセル）
↑ / ↓ リスト行移動
Enter 選択中のブックマークを開く
E 選択中のブックマークを編集
Delete 選択中のブックマークを削除

Mac の場合は Alt → Option（⌥） キーです。ショートカットは chrome://extensions/shortcuts からいつでも変更できます。

📦 インストール方法

Chrome Web Store には未公開のため、デベロッパーモードでのサイドロードが必要です。

① ZIP をダウンロード・解凍する

配布された shiori-chrome-store.zip を解凍し、shiori-extension/ フォルダを取得します。

② Chrome の拡張機能ページを開く

アドレスバーに以下を入力して開きます。

chrome://extensions/

③ デベロッパーモードをオンにする

右上のトグルスイッチを ON（青色） にします。

④ フォルダを読み込む

「パッケージ化されていない拡張機能を読み込む」をクリックし、shiori-extension/ フォルダを選択します。

⑤ ショートカットを確認・設定する

chrome://extensions/shortcuts

Alt+B が割り当てられていない場合は、「Shiori パネルを開く/閉じる」の入力欄をクリックして Alt+B を押すだけで設定できます。

🔧 使い方

ブックマークを追加する

  1. ブックマークしたいページを開く
  2. Alt+B でパネルを起動
  3. ツールバーの「＋ 新規」ボタンをクリック
  4. タイトル・URL は現在ページの内容が自動入力される
  5. 保存先フォルダを選んで「追加」

フォルダ行にカーソルを合わせると右端に「＋」ボタンが出現し、そのフォルダ直下へワンクリックで追加できます。

ブックマークを検索する

パネル上部の検索ボックスにキーワードを入力するだけ。タイトル・URL を同時に検索し、マッチした文字列はハイライト表示されます。フォルダプルダウンと組み合わせた絞り込みも可能です。

ブックマークを編集・削除する

ブックマーク行にマウスを乗せると、右端に ✏️ 編集 / 🗑 削除 ボタンが表示されます。

  • 編集: タイトル・URL・フォルダをその場で変更 → Enter または「保存」
  • 削除: 確認ダイアログが表示されるので誤操作も安心

リンク切れをチェックする

ツールバーの「✓ チェック」ボタンをクリックすると、表示中のブックマーク全件に対して HTTP HEAD リクエストを並列送信します。進捗バーが 100% になると結果サマリーが表示されます。

404 エラーのURLには自動で Wayback Machine の検索リンクが付くので、消えたページのアーカイブもすぐ確認できます。エラーを先頭にまとめたいときは「エラー優先」ボタンを押してください。

🛠 技術仕様

ファイル構成

shiori-extension/
├── manifest.json     # Manifest V3 設定・ショートカット定義
├── background.js     # Service Worker（リンクチェック・ブックマーク操作）
├── content.js        # フローティング UI（Vanilla JS）
├── panel.css         # ダークフロストガラスデザイン
└── icons/            # 16 / 32 / 48 / 128px

外部ライブラリへの依存はゼロ。Vanilla JS のみで実装しています。

manifest.json（抜粋）

{
  "manifest_version": 3,
  "name": "Shiori（栞）— フローティングブックマーク",
  "version": "1.1.0",
  "permissions": ["bookmarks", "storage", "activeTab", "tabs", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Alt+B",
        "mac": "Alt+Shift+B"
      },
      "description": "Shiori パネルを開く/閉じる"
    }
  }
}

リンクチェックの実装ポイント

// background.js（Service Worker 内）
async function checkLink(url) {
  // まず HEAD リクエストを試みる
  const response = await fetch(url, { method: 'HEAD', redirect: 'follow' });

  // HEAD が 405 の場合は GET でフォールバック
  if (response.status === 405) {
    const getResp = await fetch(url, { method: 'GET' });
    return { status: getResp.ok ? 'ok' : 'error', statusCode: getResp.status };
  }

  return { status: response.ok ? 'ok' : 'error', statusCode: response.status };
}

CORS 制限を回避するため、fetch は Service Worker（background.js）側で実行しています。また HEAD に対して 405 を返すサーバーには GET でリトライする実装にしています。

既存タブへの自動注入

インストール直後に既存タブへ Content Script を自動注入することで、再読み込み不要ですぐに使えます。

// background.js
chrome.runtime.onInstalled.addListener(async ({ reason }) => {
  if (reason !== 'install' && reason !== 'update') return;
  const tabs = await chrome.tabs.query({});
  for (const tab of tabs) {
    if (!tab.url?.startsWith('http')) continue;
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content.js']
    });
  }
});

❓ FAQ・トラブルシューティング

Q. Alt+B を押してもパネルが開かない

chrome://extensions/shortcuts でショートカットが設定されているか確認してください。インストール直後に既存タブで動かない場合は F5 で再読み込みするか、新しいタブを開いて試してください。

Q. なぜ Ctrl+Shift+B ではないの？

Ctrl+Shift+B は Chrome の組み込みショートカット（ブックマークバーの表示/非表示）として予約されているため、拡張機能側が完全にブロックされます。競合しない Alt+B を採用しています。

Q. 特定のページでパネルが表示されない

chrome://・chrome-extension://・about: などブラウザの内部ページはセキュリティ制限により動作しません。Google や Yahoo! などの通常のWebページで使用してください。

Q. リンクチェックで全件「グレー」になる

HTTP / HTTPS 以外の URL（file:// など）はチェック対象外（グレー）です。また、CORS や HTTPS の制限により一部サイトでは正確な結果が取れないことがあります。

Q. ショートカットキーを変えたい

chrome://extensions/shortcuts からいつでも任意のキーに変更できます。

📝 まとめ

項目 内容
名称 Shiori（栞）
対応ブラウザ Google Chrome（Manifest V3）
ショートカット Alt+B（Win/Linux）/ Option+Shift+B（Mac）
依存ライブラリ なし（Vanilla JS のみ）
主な機能 検索・追加・編集・削除・リンク切れチェック

ブックマークはため込むほど使わなくなりがちですが、Shiori があれば「開く → 探す → 整理する」の全サイクルを 1 つのパネルで完結できます。リンク切れチェックで定期的に棚卸しをする習慣もつきやすくなりました。

フィードバックや機能要望はコメント欄でお気軽にどうぞ！

この記事が役に立ったら LGTM してもらえると励みになります 🙏

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
Sign upLogin
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?