Shopifyアプリを自動検出するChrome拡張とサーバー連携システムの開発記録【Shopify App Checker】

最近進めているChrome拡張機能「Shopify App Checker」について、いろいろ自由研究しているので、記事化してみた。Chrome拡張のプロトから始まり、サーバーロジック移行・自動収集・可視化までをフェーズで分解しています。

フェーズ0：SaaS検出の原型（Chrome拡張）

最初に作ったのは、任意サイトで利用中のSaaS/アプリを検出するChrome拡張機能 https://chromewebstore.google.com/detail/saas-checker-jp/mhbcdalllmaikjhpflgnhclmicacljlo?hl=jaです。Network（リクエストURL/ヘッダ）、DOM、JSオブジェクト、Cookie を総合判定し、ヒューリスティックにマッチングします。
この仕組みが後の Shopify App Checker の基礎ロジックになりました。

判定優先度：network > js-global > dom > cookie

フェーズ1：Shopify専用化（定義ファイル整備）

一般SaaS検出の定義を「Shopifyアプリ検出」に再作成。検出ロジックは同一ですが、定義ファイル（検出ルール）の整備がボトルネック。現時点で約600アプリに対応していますが、まだまだ足りない。。。随時更新中

  {
    "id": "locksmith",
    "labels": { "en": "Locksmith", "ja": "Locksmith" },
    "categoryLabels": { "en": "Accounts and login", "ja": "アカウントとログイン" },
    "website": "https://apps.shopify.com/locksmith",
    "icon": "https://cdn.shopify.com/app-store/listing_images/9beb0d2bacfb9677b62fefcbfe1facee/icon/CMP0uqnMg_sCEAE=.jpeg?height=72&width=72",
    "js": {
      "Locksmith": ""
    }
  },

フェーズ2：クライアント → サーバーへロジック移行

拡張機能側は軽くし、判定をサーバーで行う構成へ変更した。大きな理由は２つ。

①検査ロジックの隠蔽化
②他ツールからの利用、拡張性

やはり検出ノウハウの流出を避けるためにも、クライアントで実施するよりもサーバーで実行させる方が安全。ただ、サーバーの負荷が💦きっと、大量のアクセスには耐えられないだろう（泣

フェーズ3：Shopify Batch Analyzer（自分用バルク検査）

URLリストを投入して 10〜20サイトをまとめて解析。Chrome拡張機能を作成した（非公開・自分用）。これも検査ロジックをサーバー化する事で簡単に作ることが出来た。

フェーズ4：Python + Google API で自動収集

人間は楽をしたがるものだ。Shopifyサイトを検索してURLを収集して、Shopify Batch Analyzerで調べる。これを自動的に出来ないかと思って作ったプログラムです。「検索 → 抽出 → 解析 → 保存」をPythonで作り上げた。もちろん、アプリの検査は、以前作ったサーバーを呼び出している。これをcron に登録して日次で回します。

# crontab (例): 毎日 02:30 に収集 & 解析
30 2 * * * /usr/bin/python3 /opt/shopify/collect_and_analyze.py >> /var/log/shopify/collector.log 2>&1

フェーズ5：Google API の 100件制限への対処

ただ、この神機能はAPIの取得上限（~100件）がある、呼び出し回数も無料枠だとそんなに多くは呼べない。次の１手は、また、クライアントのブラウザで、たくさんのURLを収集する事にした。検索結果ページを順送追跡するChrome拡張機能を作成。1ページ目→2ページ目→…を走査し、URLをすべて収集。
多少手作業は残りますが、URL収集は断然楽になる。

フェーズ6：URLリストのサーバー側一括解析

そして、フェーズ4のスクリプトに「URLリスト投入」オプションを追加した。フェーズ5のChrome拡張機能で集めたURLをサーバーで纏めて流せる仕組みですね。Google検索APIで取得検査する＋手動で集めたURL調査の両刀使いだ！

python collect_and_analyze.py --input urls.tsv --concurrency 6 --retry 3 --timeout 25

フェーズ7：統計ダッシュボード（β）

蓄積したアプリ/テーマ情報をWeb可視化。生成AIでプロトUIを作り、以下を俯瞰可能に。

アプリ導入ランキング / テーマ普及状況
国別分布 / 日次推移（新規検出・離脱）
ショップ単位の時系列スナップショット

Shopify統計情報ダッシュボード

フェーズ8：精度チューニング & 再調査

　統計情報を見ていて気付いたのですが、国情報がうまく取得できていないケースがあった、どうやら、meta.jsonを取得する時に429でエラーになるケースがあったようだ。
　また、今後は定期的に取得済みのサイトも再調査したいと思っていたので、新たにDBに貯めこんだサイト情報を元に調査する機能を追加した
　そして細かな改良は続く。