可視テキストによるキーワード検出が隠れたデータを見逃す理由とその修正方法

キーワード監視を設定し、DevToolsを開くとページのHTML内にその単語が実際に表示されているのに、アラートが一度も発生しないことがあります。何も壊れているわけではありません。標準的なキーワード検出は、ページの可視テキスト、つまり人間が画面上で実際に読める単語を読み取ります。監視している値が非表示要素、data-属性、またはインラインスクリプト内に存在する場合、それは実際のデータですが可視テキストではないため、通常の検出はそのまま通り過ぎてしまいます。

解決方法は1つのチェックボックスです。ExtfyによるAuto Refresh拡張機能のDetect KeywordタブでFind monitor text in sourceを有効にすると、キーワード検索はレンダリングされたテキストから完全なHTMLソースへ切り替わります — 非表示要素、属性、スクリプトも含まれます。

Auto Refresh

English 

Running 

Time Interval

Refresh List

Detect Keyword

タグを入力

in_stock ✕

キーワードの通知とハイライト設定

 ユーザーに通知 

キーワードが見つかった場合またはセレクターがクリックされた場合

キーワードが見つからない場合または一致するセレクターがない場合

 キーワードが見つかった/見つからない場合にサウンドを再生 

 ソース内の監視テキストを検索 

保存

隠れたデータが実際に存在する場所

最新のページは、画面上に表示する情報よりもはるかに多くの情報をマークアップ内に保持しています。注目しているキーワードは、次のような場所に存在していることがよくあります:

• 非表示要素 — display:none や visibility:hidden で囲まれたステータスメッセージ。スクリプトによって表示されるのを待っています。
• data-属性 — data-availability="in_stock" や data-status="approved" のような値。UIを制御しますが、テキストとして表示されることはありません。
• インラインスクリプトとJSON — ページが<script>ブロック内に含めて配信し、後でJavaScriptによって表示する状態オブジェクト。
• title、alt、aria-labelなどの属性 — マシンやスクリーンリーダーには読み取れますが、テキスト一致では認識されません。
• HTMLコメントとテンプレートブロック — 開発者が残したマークアップで、ページの実際の状態を今でも反映しています。

通常のキーワード検出ではなぜこれらを確認できないのか

可視テキスト検出は、人間の直感に合わせて意図的に構築されています。ブラウザがすべてをレンダリングした後、人が見るようにページを読み取り、実際に画面上に表示される単語だけを対象にします。これにより高速性が保たれ、結果も整理されます — 一致するということは、人間にもその単語が見えるという意味です。この設計の代償は見落としが発生する点です。マークアップ内にのみ存在するものは定義上、可視テキストではないため、検出器はそれを確認することすらありません。ページ内に入力したキーワードとまったく同じ文字列が大量に存在していても、検出は正しく「見つからない」と報告します。これはレンダリングされた表示では実際に存在しないためです。

解決策: Find monitor text in sourceを有効にする

1. 監視しているページでAuto Refresh拡張機能を開き、Detect Keywordタブに切り替えます。
2. ソース内に表示される通りにキーワードを入力します — 例えば、ページが後で表示する「In stock」ラベルではなくin_stockを入力します。
3. Find monitor text in sourceにチェックを入れます。
4. Saveをクリックします。次回のリロード以降、すべてのチェックでは可視テキストだけでなく、非表示要素やスクリプトを含む完全なHTMLソースがスキャンされます。

可視テキスト検出とソース検出の比較

• 読み取る対象: 可視テキストモードは人が見るレンダリング済みページを読み取ります。ソースモードはサーバーが送信した生のHTML — すべてのタグ、属性、コメント、インラインスクリプトを読み取ります。
• 速度: 可視テキストモードは軽量です。完全なソースをスキャンすると各リロードでより多くの処理が必要になるため、チェックは少し重くなります。
• 誤検出: 可視テキストモードは誤作動がほとんどありません。ソースモードでは、画面上の表示とは関係のない背景マークアップ内のキーワードにも一致する可能性があります。
• 最適な用途: 日常的な監視には可視テキストモード、ページが保存しているものの表示しない値を監視する開発者や上級ユーザーにはソースモードが適しています。

実際の例: ページに表示される前に変更を検出する

商品ページが購入者には「在庫切れ」と表示している一方で、マークアップにはすでにdata-availability="in_stock"が含まれている状況を想像してください — データは更新されていますが、UIがまだ追いついていません。可視テキスト検出では古い「在庫切れ」ラベルとの一致を続けます。Find monitor text in sourceを有効にし、キーワードをin_stockに設定すると、Auto RefreshはHTMLに変更が反映された瞬間にその変化を検出します。多くの場合、表示ページが更新されるよりも少し早く検出できます。同じ方法は、非表示のエラーフラグ、管理ツール内の承認状態、JavaScriptによって遅れて表示されるあらゆる値にも使用できます。

ソース一致の精度を維持する

• 具体的に指定する。Short, common words appear all over a page's markup by accident; a distinctive string like in_stock or status-approved is far safer than stock.
• 不要な一致に注意する。 何も目に見える変化がないのにアラートが発生する場合、キーワードが背景マークアップ内で一致しています — キーワードをより限定するか、そのルールを可視テキストモードに戻してください。
• すべてではなくルールごとに有効にする。 ページ上で標準検出がすでに必要なものを検出できる場合は、より高速でクリーンなチェックを行うため、そのページではこのオプションをオフのままにしてください。

可視テキスト検出は、監視しているものが実際には表示されない場合を除けば、適切な初期設定です。キーワードが非表示要素、属性、またはスクリプト内に存在する場合は、Detect KeywordタブとAuto RefreshでFind monitor text in sourceを有効にすると、DevToolsと同じようにページを読み取り、通常の検出では静かに見逃されるデータを検出できます。