はじめに
前回、メルカリオークションに
・残り時間のカウントダウンエフェクト
を実装する記事を書きました。
【非公式】メルカリに非公式機能「オークションタブ」を実装してみた。その２
https://qiita.com/merpro-dev/items/21feb002bc0f0a19b06d
（こんな感じ）
続いて検索結果にもオークションのみを表示してみたいと思い実装してみました。
実際の画面
Before：通常の検索結果
After：オークションのみに絞った検索画面
ちゃんとオークションのみ表示されています。
今回もJavaScript（ブラウザ拡張機能）を使って、検索結果画面に「オークションのみ」の絞り込みチェックボックスを埋め込み、フリマ/オークション商品を表示/非表示する機能を実装した話を軽く紹介します。
実装のポイント
ブラウザ拡張機能（Content Scripts）から、メルカリの検索画面に対して以下の2点を注入・実行します。
JavaScript: 画面上の要素を監視し、特定の目印（バッジ）を持たない定額商品を非表示（display: none）にするロジック。
UI/UX: 既存の検索フィルターエリアを自動で検出し、デザインを崩さずにチェックボックスを横並びに差し込む処理。
1. デベロッパーツールで「オークション」の目印を見つける
まずはオークションの特定から。
メルカリの検索結果をデベロッパーツール（F12）観察。
<!-- メルカリの検索結果リスト一覧 -->
<!--簡易化したHTML-->
<ul class="item-list-container">
<!-- 商品カード1 (通常の定額販売商品) -->
<li data-testid="item-cell">
<a href="/item/m63863487250" data-testid="thumbnail-link">
<div data-testid="item-thumbnail">
<!-- 商品画像（src取得用） -->
<img src="https://static.mercdn.net/thumb/item/webp/m63863487250_1.jpg" alt="商品画像">
<!-- 価格コンテナ -->
<div class="priceContainer">
<span class="merPrice">
<span class="currency">¥</span>
<span class="number">7,300</span>
</span>
</div>
<!-- 商品名 -->
<span data-testid="thumbnail-item-name" class="itemName">BIG MIKE オンブレシャツ Msize</span>
</div>
</a>
</li>
<!-- 商品カード2 (通常の定額販売商品) -->
<li data-testid="item-cell">
<a href="/item/m62921794982" data-testid="thumbnail-link">
<div data-testid="item-thumbnail">
<img src="https://static.mercdn.net/thumb/item/webp/m62921794982_1.jpg" alt="商品画像">
<div class="priceContainer">
<span class="merPrice">
<span class="currency">¥</span>
<span class="number">13,800</span>
</span>
</div>
<span data-testid="thumbnail-item-name" class="itemName">山田蓮 BIGMIKE ビッグマイク オンブレチェックシャツ ミント TSY</span>
</div>
</a>
</li>
</ul>
ここのhtmlを解析して
・フリマ
・オークション
の差異を分析します。
結果オークション形式の商品だけを抽出することに成功しました。
2. 中核ロジック（簡易版）
チェックボックスのON/OFFに合わせて、商品カード表示/非表示にするシンプルなロジックです。
let filterEnabled = false; // フィルターのON/OFF状態
const applyAuctionFilter = () => {
// メルカリの商品カード（li要素）をすべて取得
const items = document.querySelectorAll('li[data-testid="item-cell"]');
items.forEach(item => {
// オークション特有の「目印（テキストやクラス）」が含まれているか判定
const priceArea = item.querySelector('[class*="priceContainer"]');
const isAuction = priceArea && priceArea.innerText.includes('オークションの目印');
if (filterEnabled) {
// フィルターONなら、オークション以外（定額商品）を非表示にする
item.style.display = isAuction ? 'block' : 'none';
} else {
// フィルターOFFならすべて表示
item.style.display = 'block';
}
});
};
3. デバッグ方法：コンソールでの動的監視ログ
メルカリのようなSPAは、HTMLの構造がガラリと変わったり、無限スクロールで次々に新しい商品が追加されたりする場合があります。
「拡張機能が動いているのか、ターゲットの要素を正しく掴めているのか」を追跡するため、デバッグログをコンソールに出力する仕組みも実装してみました。
// ログ出力を目立たせるための共通デバッグ関数
const log = (message, data = '') => {
console.info(
`%c[AuctionFilter] ${message}`,
'background: #ff0211; color: #fff; font-weight: bold; padding: 2px 5px;',
data
);
};
// 画面変化を検知するたびにコンソールへ進捗を報告
if (filterEnabled) {
log(`フィルター適用中: 定額商品を非表示にしました。`);
} else {
log(`警告: 指定のフィルター設置親コンテナが見つかりません。`);
}
これのおかげで、メルカリ特有のPSAでも、どのタイミングで要素の取得が空振っているかが一目でわかるようになり、開発効率が上がりしました。
工夫した点：SPAの画面変化に対応
メルカリはSPAでHTMLが生成される仕様。画面生成のタイミングや構造が変更されても対応できるロジックに構築。
開発してみて思ったこと
これで検索結果の中に埋もれていたオークション商品を隅から隅まで探すことが出来るようになりました。メルカリオークション興味のある方におすすめです。自分でも使うと思います。
おわりに
メルカリ公式では実装されていない機能（かゆい所に手が届く等）を開発中。さらにブラッシュアップを重ねています。
下記のフォームよりご連絡いただければ
・メルカリオークション一覧機能
・残り時間表示機能
・オークション/フリマの検索結果表示/非表示機能
を搭載したメルプロ（オークション）の拡張版を無料でお使いいただけます。
（無料期間中）
是非メルカリオークション興味のある方はご連絡ください。
お待ちしてます！
👉 メルプロ ベータ版応募フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdJgPjVqALnbF0-9tLFu_tevYIC6vF6pUNB3Y59SDGVVLebIg/viewform