表示しているページの欲しい画像をZIPでまとめてダウンロードできるChrome拡張を作ってみた。「ちょうだいExtension」

以前からChrome拡張に興味があって、今回試しに作ってみたので紹介してみる。

スクリーンショット

ちょうだいExtension

機能

ちょうだいExtensionの機能は以下の通り

• 表示しているページの画像をグリッドで表示
• 選択した画像だけをZIPで圧縮してダウンロードできる
• 全て選択と解除ボタン付き

画像まとめブログで使うことを想定して作っているけど、ふたば等の画像アップローダでも使えるはず

使い方

必要なもの

• Google Chrome
• Choudai Extension(ダウンロード)

手順

1. Google Chromeを起動する
2. アドレスバーにchrome://chrome/extensions/と入力してエンターキーを押す
3. Choudai Extensionのcrxを拡張機能の画面にドラッグ&ドロップ
4. 拡張を追加しますかみたいなこと聞かれるのでそのまま追加する

実際にダウンロードしてみる

1. 画像まとめブログなどのページを表示する
2. 右上に追加されたアイコンを押す
3. 画像があった場合は一覧に表示されるので欲しい画像にチェックを入れる
4. 「選択した項目をZIPに保存する」を押してプログレスバーを見ながら待つ
5. ZIPが生成されて表示がプログレスバーから「ダウンロード」と書かれたボタンに変わるので押す
6. ZIPダウンロードされる

今後

• もう少しコード整理したい
  • jQueryでビューを操作してるとことか
• チェックされている画像をもう少しわかりやすくしたい
• 今のところダウンロードを高速化させるために並列で処理させているけど、うまく待ち合わせできていない等の問題がある場合は直列化するかもしれない
  • たまに残り一件から進まないことがある
    • サイトによるかも？
• zipでダウンロードした後に自動的に解凍して画像フォルダに保存するスクリプト書きたい
  • 解凍して移動させる作業だるい
• 保存以外にも閲覧しやすくする機能を何か追加するかもしれない

技術的な話題

• zipを圧縮する部分はJSZipを使用した
  • http://stuk.github.io/jszip/
  • 割りと使いたい機能が揃っていて、手軽に作れるのでjavascriptでzipの解凍・圧縮させたい時に結構便利
• 取ってくる画像の条件はaタグのhrefの飛び先がjpg or png or gifだった場合のみ
  • そのため現状ではリンク先のない画像が取ってこれない
  • 片っ端から取ってくるとゴミも増えるのでやりたくない
  • そこら辺はなにかいいアイデア出てきたら試す予定

まとめ

• 初めてまともにjavascriptで実装したので凡ミス多かった
  • ついでにCoffeeScriptかTypeScriptで再実装してみたい
• Chrome拡張はクロスドメインとか気にしなくていいので色々できそう
• 結構楽しかったのでまたなにかネタが見つかったら作る予定
• ソースコードはGitHubに公開しているので自由に改変して使ってください。
  • https://github.com/chuross/choudai-extension