前稿「[Bardに聞く]WEBスクレイピングで子ページにある情報を検索」で子ページにある記載からの検索を実装しました。

前稿は簡単な構造であるため、ログインが必要なページや前操作があるなど複雑な内容には対応できません。
複雑でも実装すればいい、という手法もありますが、
日常的な業務を気軽に効率化するならば、そのあたりは除外したいもの。

今回は、今表示されているページでJavascriptが実行できる
Chrome拡張機能「User JavaScript and CSS」を使用し
検索結果ページでタイトル一覧を取得します。

目的

・よくある検索ページ構成

このような構成のページ内で、
検索結果のタイトルである会社名の一覧を取得します。
Excelに張り付けるべく、会社名ごとに改行した文字列を作成します。

対応

Chrome拡張機能「User JavaScript and CSS」をChromeに追加します。
拡張機能を有効にすると下記の画面が表示されますので、右上の設定ボタンを押します。

すると保存されたJavascript and CSSの一覧ページが表示されます。
Add new siteを押すと名前、URL、Javascript、CSSを入力する欄が表示される、シンプルな機能です。
jsエディタとして文字色がついている親切さです。

ソースは今回はgitに置かせていただきました。
https://github.com/gingerale333/qiita/blob/main/UserJavascript/getCompanyList.js
・取得対象項目（例では会社名）
・次ページへの遷移ボタン
のクラス名は対象サイトに合わせて書き換える必要があります。

動作

User JavaScript and CSSの設定ページでURLを指定した検索ページで検索を実行すると、
今表示されている検索結果のタイトル一覧を作成し、小窓で表示します。
OKを押すと次のページに進みます。キャンセルすると表示中画面に戻ります。
表示中の結果しか一覧化しないので、テキストをコピーして控えたらOKを押す動作の繰り返しを手動で行いました。

デベロッパーツールのコンソールを表示すると、
User Javascript is running.
が出力されていますので、そこからソースへ飛んでデバッグ実行することも可能です。

残課題：全結果の一覧化はできない

URLパラメータによって前ページの表示分を次ページへ引き継ぐ動作を記載したのですが
3ページ目までは成功して4ページ目はエラーになってしまい、この動作を削除しました。
原因はURLが長すぎることです。
前ページからの遷移時に引継ぎを行うソースにご興味のある方は
git履歴から最初のバージョンをご取得ください。

最後に

以上、本日はChrome拡張機能「User JavaScript and CSS」の使い方のご紹介でした。
業務自動化とはいかず一部効率化となりましたが、
詳細表示有無の選択が無い検索ページではどこでも使うことができそうです。