前回 xhr で画像をダウンロードして zip するコードを書いた。せっかくなので拡張にしてみた。
使い方
上の拡張をインストールすると、URLバーの横に
こういうボタンがでるので、画像をダウンロードしたいページでそれを押す。 押すと、マウスオーバーした html 要素がふわっとハイライトされるようになる。
これだと選択した要素内に画像がないので空の zip になってしまう
こんな感じに選択されればオッケー。 クリックすると、その要素内の画像が zip してダウンロードされる。
実装
chrome 拡張内で実行されるコードはページをブロックしないので、重い処理は拡張内のコードで実行してあげればよい。
- ページ内からダウンロードしたい画像のURLを抽出する
- 拡張のコードで、画像を取得・zip (ここは前回と同じ)
- zip をローカルにダウンロードする
けど拡張からページの document オブジェクトを直接操作することはできない（たぶん）
要素をハイライトしたり、クリックした要素内から画像 URL を抽出するといったコードは、そのページのコンテキストで実行する必要があるので chrome.tabs API の executeScript メソッドを利用する。 executeScript はスクリプトの最後で評価した値を callback に渡してくれるが、ここで渡せる値は jsonable な値のみなので、promise オブジェクトとかを渡すことはできない。クリックで選んだ要素内の画像を・・・ということをしたい場合、スクリプト終了時にはまだ画像URLをとることはできないので、ページのスクリプトと拡張のコードで通信する必要がある
これを使う。クリックで要素を選択したら、その要素内の画像URLを抽出して sendMessage するようにした。
通知された URL を元に画像を取得して zip した後は、chrome.downloads API を用いてユーザーのダウンロードフォルダにダウンロードさせる。 downloads API は chrome 31 くらいから入ったようなので、それ以前の chrome では使えない。
やっつけ感があるので、zip ファイルの名前がよくわからない 16 進文字列だったり、zip 処理中のフィードバックがなかったりとアラはいろいろとあるけどそれなりに便利と思う。
適当にご利用ください。
