【自動整理】ストック素材のダウンロードを自動整理するChrome拡張機能「Stockpile」を作った

はじめに
何を作ったか
なぜ作ったか
1. 課題
2. 既存のソリューション
開発で苦労した点
技術選定
1. フレームワークを使わない選択
2. ES Modulesの活用
学びと気づき
おわりに
関連記事

はじめに

映像制作をしていると、MotionElementsやAudiioから1プロジェクトで数十〜数百のストック素材をダウンロードします。BGM、効果音、動画素材、テンプレートがすべて「ダウンロード」フォルダに混在し、ファイル名は ME_12345678_preview.mp4 のような意味不明な文字列。後から「あの曲なんだっけ」と探すのが本当に大変でした。

この問題を解決するために、ダウンロードをサイト別・カテゴリ別に自動振り分けするChrome拡張機能 Stockpile を作りました。

Stockpile - Download Organizer - Chrome Web Store

Automatically organize downloaded assets from stock sites into folders by site and category

何を作ったか

Stockpileは、ストック素材サイトからのダウンロードを自動的に整理してくれる拡張機能です。

主な機能は以下の通りです。

ダウンロードを Stockpile/[サイト名]/[カテゴリ]/ に自動振り分け
ページからタイトル、タグ、再生時間などのメタデータを自動取得
検索・フィルタリング可能なダウンロード履歴
JSON/CSV形式でのエクスポート

対応サイトは以下の通りです。

MotionElements（動画、BGM、効果音、テンプレート等）
Audiio（BGM、効果音）

なぜ作ったか

課題

映像編集の仕事をしていると、1つのプロジェクトで数十〜数百のストック素材をダウンロードすることがあります。

動画素材
BGM
効果音
モーショングラフィックステンプレート
LUTファイル

これらが全て「ダウンロード」フォルダへ一緒くたに放り込まれる。ファイル名も ME_12345678_preview.mp4 のような意味不明な名前。後から「あの曲なんだっけ」と探すのが本当に大変でした。

既存のソリューション

フォルダを手動で作って整理する方法もありますが、ダウンロードのたびに手作業でフォルダに移動するのは面倒すぎる。ダウンロードマネージャー系の拡張機能も試しましたが、ストック素材サイト特有の「カテゴリ情報」や「メタデータ」を活用した整理には対応していませんでした。

「じゃあ作るか」と。

開発で苦労した点

1. Manifest V3への対応

Chrome拡張機能のManifest V3は、V2と比べて制約が多くなっています。特にバックグラウンドページが廃止され、Service Workerに移行したことで、いくつかの設計変更が必要でした。

// manifest.json
{
  "manifest_version": 3,
  "background": {
    "service_worker": "background/service-worker.js",
    "type": "module"
  }
}

Service Workerは必要なときだけ起動し、アイドル状態になると停止します。そのため、ダウンロード待ちのメタデータを一時的に保持する方法として、変数ではなく chrome.storage.local を使う必要がありました。

2. ダウンロードURLのマッチング問題

これが一番苦労した部分です。

ストック素材サイトでは、ダウンロードボタンのクリックから実際のファイル取得までに、複数のリダイレクトが発生します。

クリック → API呼び出し → 認証 → CDNリダイレクト → 実際のダウンロード

Content Scriptで取得した「クリック時のURL」と、chrome.downloads.onDeterminingFilenameの「実際のダウンロードURL」の不一致が頻発しました。

最終的に、複数のマッチング戦略をフォールバックで実装しました。

// 1. 完全一致
let metadata = pendingDownloads[downloadUrl];

// 2. 部分一致（URLの一部でマッチ）
if (!metadata) {
  metadata = Object.values(pendingDownloads).find(m =>
    downloadUrl.includes(m.urlPart) || m.originalUrl?.includes(downloadUrl)
  );
}

// 3. ドメインマッチ + タイムスタンプ（最終手段）
if (!metadata) {
  metadata = findByDomainAndTimestamp(downloadUrl);
}

3. 動的コンテンツへの対応

MotionElementsやAudiioはSPAライクな構造で、ページ遷移なしにコンテンツが切り替わります。また、ダウンロードボタンが動的に生成されることも。

MutationObserverを使って、DOMの変更を監視し、新しく追加されたダウンロードリンクを検出するようにしました。

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const downloadLinks = node.querySelectorAll('a[href*="download"]');
        downloadLinks.forEach(link => attachDownloadListener(link));
      }
    }
  }
});

observer.observe(document.body, { childList: true, subtree: true });

4. XHR/Fetchのインターセプト

一部のダウンロードは、通常のリンククリックではなく、JavaScriptで動的に発火されます。これに対応するため、XHRとFetchをラップして監視しています。

// Fetchのインターセプト
const originalFetch = window.fetch;
window.fetch = async function(...args) {
  const url = args[0]?.url || args[0];
  if (isDownloadUrl(url)) {
    registerPendingDownload(url);
  }
  return originalFetch.apply(this, args);
};

技術選定

フレームワークを使わない選択

PopupやOptionsページのUIには、ReactやVueなどのフレームワークを使わず、Vanilla JavaScriptで実装しました。

拡張機能のサイズを最小限に抑えたかったこと、UIがそこまで複雑ではないこと、ビルドプロセスなしでデバッグしたかったことが理由です。

結果的に、全体で数十KBに収まり、インストール後の動作も軽快です。

ES Modulesの活用

Service Workerでは "type": "module" を指定することで、ES Modulesが使えます。これにより、storageやdatabaseの処理を別ファイルに分離し、コードの見通しが良くなりました。

// service-worker.js
import { getSettings, savePendingDownload } from '../lib/storage.js';
import { addDownloadRecord, searchDownloads } from '../lib/database.js';