下のボタンをブックマークバーにドラッグ&ドロップして登録してね。

find-extension← このボタンをブックマークバーへドラッグ

bookmarklet URL

Chrome の Ctrl+F / ⌘F は大文字・小文字を区別できません。ID を探したいのに id や Id まで拾ってしまう、といった場面のためのブックマークレットです。

ページ内でテキストを走査するだけで、ネットワークには送信されません。localhost や社内ページでも動きます。

使い方

検索したいページを開きます (localhost でも OK)
ブックマークバーに登録した「find-extension」をクリックします
右上に検索バーが出るので、検索語を入力します
もう一度ブックマークレットをクリックするか Esc で閉じます

テキストを選択した状態で起動すると、その文字列が検索語として最初から入ります。

操作

操作	キー / ボタン
次の一致へ	`Enter` / `↓`
前の一致へ	`Shift+Enter` / `↑`
閉じる	`Esc` / `×`
再スキャン	`⟳`

オプション

Aa — 大文字・小文字を区別する (デフォルト ON)
.* — 検索語を正規表現として解釈する
W — 単語単位で一致させる (\b で囲むため、英数字にのみ有効)

仕組み

CSS Custom Highlight API を使い、Range に対して直接ハイライトを描画しています。<mark> を挿し込む従来手法と違って DOM を一切書き換えないため、React などで作られたページを壊しません。

インライン要素 (<b> / <span> など) をまたぐテキストは連結して検索するので、<p>Hello <b>World</b></p> から Hello World を見つけられます。逆にブロック要素の境界では切るため、隣り合う <div> の文字がつながって誤ヒットすることはありません。

制限

Chrome / Edge 105 以降、Safari 17.2 以降が必要です (非対応ブラウザでは警告が出ます)
一致件数の上限は 5000 件です (超えると件数表示に + が付きます)
Shadow DOM の内側、<iframe> の中は検索対象外です
ページを開いた時点の内容をスキャンします。動的に増えた要素は ⟳ で再スキャンしてください