こんにちは！サウスです。
みなさんBrainの有料記事って読んでますか？最近だとウミノさんの「Substackの教科書」やイケハヤさんの「明鏡」などを買って読み込んで色々と実践しています。
それぞれとても内容が濃くてボリュームが大きい。一日では読みきれません😂
イケハヤさんの『明鏡』は1記事で 300以上のセクション。
どこまでもスクロールできる大ボリューム。読み応え抜群で毎日コツコツと読み進めてます。
「昨日どこまで読んだっけ？」
「あの章、もう一度見直したいけどどこだっけ？」
「気になった一文、あとで見返したい」
そんな機能がほしいのですがBrainのオフィシャル機能としてはサイドバーの目次だけ。ちょっと物足りなかったんですよね。
なので自分の学習を効率よく行うためにChrome拡張機能を作りました。
拡張機能の名前は Brain Reader。
電子書籍を読書するみたいに、目次・栞・ハイライト・進捗管理が Brain の中で完結します。Chrome拡張機能でWebストアから無料で追加可能です。
Brainでの学習のお供にぜひどうぞ。
こんな方におすすめ
Brainで購入した教材を 体系的に学習 したい
気になった箇所を 色分けでマーク して後から見返したい
どこまで読んだか を把握したい
長文記事を 複数日にまたいで 読み進めたい
学びを Markdownで書き出して ブログやNotionにまとめたい
主な機能
1. 目次タブ — 全セクションをワンクリックジャンプ
記事内の h2 / h3 / h4 見出しを全部拾って、サイドバーに一覧表示。
検索ボックス でセクション名を絞り込める
既読セクションには 緑のチェック
栞を付けたセクションには オレンジのドット
スクロールに連動して 現在位置が赤くハイライト
クリックすればその見出しへスムーススクロール。309セクションでも迷わない。
2. 栞（ブックマーク） — 後で戻りたい場所にしおり
見出しにマウスを乗せると、右側にオレンジの 栞ボタン が出現。クリックで登録完了。
「栞」タブでいつでも一覧確認
クリックでその場所へジャンプ
記事ごとに別管理なので、他の記事と混ざらない
3. ハイライト＆メモ — 4色のマーカーで重要箇所を記録
本文のテキストを 3文字以上ドラッグ選択 するとカラーパレットが現れます。
黄 / 緑 / 赤 / 青 の4色で使い分け
ペンアイコンで メモ付きハイライト も作成可能
複数行・段落をまたいだハイライト にも対応
`Alt` + ハイライト部分クリックで個別削除
使い分け例:
🟡 黄色: 重要ポイント
🟢 緑: 納得した箇所
🔴 赤: 要復習
🔵 青: 引用したい一文
4. Markdown書き出し — 学びを外部にエクスポート
「ハイライト」タブの Markdownでコピー ボタンをクリックすると、全ハイライトが下記フォーマットでクリップボードに保存されます。
# Brain学習ハイライトまとめ
作成日: 2026/4/15
---
## 1. 第3章 マーケティング戦略
> ペルソナ設定は最初の1週間で5回書き直せ。
📝 メモ: 初稿は粗くてOK、数をこなす
## 2. 第4章 コピーライティング
> ...メモをそのままNotionやObsidian、ブログ記事にペーストできます。
5. 進捗バー＆統計
画面最上部に オレンジの進捗バー（スクロール位置に連動）
統計タブで 読了率・既読数・栞数・ハイライト数 を確認
画面上部30%に入った見出しは 自動で既読化
6. 続きから読む機能
一度読んだ記事を再訪すると、右端に「前回の続きから」バナーが出現。クリックで前回位置へスムーススクロール。最後に読んだページから再開可能。
7. 初回チュートリアル
インストール後の初回起動時に、6ステップのインタラクティブツアー が流れます。スポットライトで画面要素を強調しながら使い方を案内。困ったらヘッダーの❓ボタンでいつでも再表示できます。
8. 使い方タブ
サイドバー内に「使い方」タブを常設。栞・ハイライト・進捗の手順を番号付きで確認できます。
データの仕組み（気になる人向け）
完全ローカル保存
すべてのデータは ブラウザの localStorage に保存 されます。サーバーに送信することは一切ありません。
アカウント登録不要
通信なし
プライバシー完全保護
記事ごとに独立管理
記事のURLごとに 独立したストレージキー を発行しているので、Aの栞がBの記事に混ざる心配はありません。
brain_reader_<URLハッシュ>_<パス識別子>データを全部消したい時
サイドバー → 統計タブ → 全データ削除 ボタンで一括削除できます。
実装のこだわり
🎨 Brainカラーに合わせた白＋オレンジ/レッドテーマ
Brainの公式サイトに馴染むよう、白ベースにオレンジ〜レッドのグラデーションをアクセントに。本文の邪魔にならないミニマルデザイン。
🔤 日本語フォント最適化
`Hiragino Kaku Gothic ProN → Yu Gothic → Meiryo` のスタックで、Mac/Windows両方で綺麗に表示。
⚡ SPA遷移対応
BrainはVue.jsのSPAなので、`history.pushState` をフックして遷移を検知。ページ遷移のたびに該当記事のデータを読み込み直します。
🎯 Vueの遅延レンダリング対応
記事コンテンツは遅延ロードされることがあるので、遷移後 300ms / 900ms / 2000ms / 3500ms の 段階的リトライ でTOCを構築。2秒ごとの見出し数チェックで動的追加にも追従。
🔒 誤書き込み防止
遷移直後の自動スクロール(`scrollY=0`)で前回位置が上書きされないよう、時間ゲート + 値しきい値 の二重保護
記事ごとにストレージキーを分離する安全な仕組み
よくある質問
Q. Brainトップページではサイドバーが開きません
A. トップページでは機能が無効化されます。記事ページを開くと自動で有効になります。
Q. ハイライトした部分の色を後から変えたい
A. 現バージョンでは未対応です。一度削除してから再度ハイライトしてください（メモ内容は再入力になります）。
Q. 複数デバイスで同期したい
A. 現バージョンはローカル保存のみ。必要に応じて「Markdownでコピー」で書き出したデータを他のツールに保存してください。
Q. 記事以外のBrainページでも動く？
A. 記事ページ（本文エリアがある）でのみ機能します。トップ・検索・プロフィールページでは無効です。
Q. Chrome以外のブラウザで使える？
A. Manifest V3対応のChromium系ブラウザ（Edge、Brave、Arcなど）で動作します。Firefox/Safariは未対応です。
制限事項
本文DOM構造が変わる大型アップデートが入ると動作しない場合があります（セレクタ更新で対応可能）
localStorage容量上限は概ね5〜10MB。ハイライトを大量に作っても容量的にはまず問題ありませんが、同一ドメインの他サービスと共有している点に注意
最後に
Brainは良質な教材の宝庫ですが、読書体験はまだ改善の余地があります。この拡張機能が、あなたの学習を少しでも加速させる助けになれば嬉しいです。
不具合報告や要望はご連絡ください
https://x.com/south_0120
めちゃくちゃ有難いです！！
早速ダウンロードして
使わせていただきます✨
サブスタ昨日始めたばかりで
よかったら仲良くしてください🙌
サウスさん、機能拡張ダウンロードしました！
Brainの記事、結構読むのに苦戦してたので、すごく助かりました。