🧩

Findyのお気に入りを手元でさくっと整理する小さなChrome拡張を作った

に公開
JavaScript
Chrome拡張
productivity
findy
tech

3行で

Findyで見つけた求人/案件を、自分の基準で軽く仕分け・メモしたくて、個人用の拡張を作りました。拡張のポップアップからお気に入りへの追加・削除を行い、結果はローカルの保存領域に反映します。非公式・自己責任のツールです。サイトのDOMが変わると動かなくなる可能性があります。

背景

転職・副業の情報収集でFindyを使っているのですが、ブックマークするほどではない「あとで見る」を軽く積んでいく手段が欲しくなりました。ブラウザのブックマークや外部ツールに飛ばすと、文脈が切れて回遊のテンポも落ちます。そこで、ページ内の見えている情報をそのまま使いながら、「いまの流れ」を崩さずに印を付けられる拡張を用意しました。

何を作ったか

Findyで検索・閲覧中の求人/案件に対して、お気に入りへの追加・削除を手元で行うChrome拡張です。目的は自分の軽い整理とメモ。Findy公式の機能ではありません。

主なポイント

  • 拡張のポップアップUIから、対象ページの求人/案件をお気に入りへ追加・削除
  • 結果は拡張内の保存領域に反映（ローカルで閉じる想定）
  • DOMのクラス名や構造に依存するため、サイト更新で動作が変わる可能性あり

導入方法（開発者モードで読み込み）

Chrome拡張としてローカル読み込みします。

  1. Chromeで「chrome://extensions」を開く
  2. 右上の「デベロッパー モード」を有効にする
  3. 「パッケージ化されていない拡張機能を読み込む」をクリック
  4. リポジトリをクローンし、manifest.json のあるフォルダを選択
  5. 拡張が有効化されたことを確認

アンインストールは「chrome://extensions」から対象拡張の「削除」を選べば完了です。

使い方（ざっくり）

  • Findyで気になる求人/案件の一覧や詳細を開く
  • 拡張アイコンをクリックし、ポップアップからお気に入りに追加・削除

利用イメージ

操作の流れ（GIF）

利用イメージ

OKの追加（ポップアップ → 背景色が変化）

OK追加（ポップアップ）

OK追加（反映後）

NGの追加（ポップアップ → 対象行が非表示）

NG追加（ポップアップ）

NG追加（反映後）

仕組みと設計

構成はシンプルです。主なファイルは以下。

  • manifest.json: 権限、マッチパターン、読み込むスクリプトなどの宣言
  • content.js/content.css: ページ上の求人/案件カードやボタンにアクセスして、UIやクリックハンドラを付与
  • popup.html/popup.js/popup.css: ポップアップのUIと操作ロジック
  • images/: アイコンや利用イメージ

お気に入りの記録はローカルの保存領域に置く想定です。Chrome拡張のストレージAPI（chrome.storage.localなど）や、ポップアップからのメッセージングでcontent scriptとやり取りする一般的な構成にしています。Findy側のDOMに依存するため、クラス名や構造が変わった場合はcontent.jsのセレクタを調整します。

注意した点

  • 「ページの流れ」を崩さないこと（ポップアップで最小限の操作に絞る）
  • 依存先は最小にし、読み込みの失敗やタイミング差で壊れないよう待機や再試行を用意
  • 取得するのはページに表示されている最小限の情報。外部送信はしない（個人利用・ローカル完結）

工夫したところ

  • NGでふわっと消える

制作メモ

初期のたたき台はClaudeで生成しました。要件は短く、拡張がやるべきことだけを並べる形にしています。生成物はそのままでは動かない箇所もあったので、Chrome拡張のドキュメントを見ながら調整しています。

使ったプロンプト

Chrome拡張を作成してください。
* ウェブサイトに表示されているリストについて行の後ろにOK/NGボタンをつける
* OKはfavoriteリストに入れる
* NGはtrashリストに入れる
* trashリストに入れたものは表示されない
* OKリストに入れたものは背景色を変化させる
* それぞれのリストから削除することができる

詰まったところは主にmanifest.jsonの記述（権限やマッチパターン）で、公式ドキュメントがとても手厚いので、結局そこを丁寧に読むのが一番早かったです。マニフェストの警告・エラーはコンソールとドキュメントを突き合わせれば、だいたい解消できます。

制限事項と注意

  • 非公式の個人用拡張です。Findyの利用規約や各種ポリシーに反しない範囲で使用してください
  • サイトのDOMやクラス名の変更で動かなくなることがあります（その場合はcontent.jsのセレクタを修正）
  • ページの読み込みタイミングや遅延読込の影響で、ボタンやUIが表示されないことがあります
  • データの扱いはローカル完結を前提としています。外部送信は想定していません

トラブルシュート

つまずきと対処のメモです。

  • 拡張が反応しない

    • 拡張の有効化を確認し、拡張の再読込（拡張ページの更新）を試す
    • 対象URLのマッチパターンが合っているかmanifest.jsonを確認

  • ポップアップに何も表示されない/中身が空

    • chrome.storageのキー名やデータ構造（例: favorite, trash）が想定どおりか確認
    • 旧バージョンのデータが残っている場合は一度ストレージをクリアして再読込
    • Consoleでエラーやchrome.runtime.lastErrorの有無を確認し、必要に応じてキー名や参照先を修正

今後やりたいこと（メモ）

  • リストから消したときにリロードさせたくない

  • OKボタンを押しても解除したい

  • セレクタの設定をmanifest.jsonや別ファイルで差し替えやすくする

  • ページごとのスキーマ差分にもう少し丁寧に対応

  • 軽いエクスポート/インポート（ローカルJSON）

スクリーンショット/動画

本記事には操作イメージ（PNG/GIF）を掲載しています。操作動画のGIF化にはAdobe公式のオンラインツールを使用しました。

ライセンス/配布

  • ライセンスはMIT
  • 個人利用を想定。外部への配布やストア掲載は行いません
  • 問題があれば取り下げます

参考リンク

GitHubで編集を提案

Discussion