【pixiv downloader】作品を一括PDFダウンロードするchrome拡張

はじめに

好きな作品を保存しておかないと、イラストレータさんが消しちゃうかもしれない！
でも、一枚一枚PNGファイルで保存されても困るし、PDFで保存したい！
というかPDFならkindleで読みたい！

対象拡張

Pixiv downloader

スローガン

以下のスローガンをもとに開発いたしました！

ワンクリック

簡単操作でダウンロードがしたい！

一括

イラスト1枚=1ファイルでダウンロードされても...

PDF

まとめて見るならやっぱりPDFですよね！

kindle連携

スマホのkindleアプリでいつでも見たい！

使用方法

1. chrome拡張ページから「Pixiv downloader」を検索し、「Chromeから追加」をクリックします。

2. お好きなpixivの作品ページに移動し、ボタンをクリックします。

• PDFをダウンロードする場合：右上の青い「PDF」ボタンをクリックします。
• kindleにアップロードする場合：右上の青い「kindleアイコン」ボタンをクリックします。
  

3. ダウンロード/アップロードされるのを待つだけ！
※kindleへのアップデートは、ファイルサイズによって時間がかかることがあります。

以上です♪

対象

本拡張で対象となるものを以下にまとめました。
今後の拡張のアップデートで追加していく予定です。

	PDFでダウンロード	kindleにアップロード
イラスト	○	○
小説	○(実装予定)	○(実装予定)
イラストシリーズ	○(実装予定)	○(実装予定)
小説シリーズ	○(実装予定)	○(実装予定)

開発環境

以下テンプレートを使用して開発しました。

• mv3-vue-chrome-extension-template

こちらのテンプレートでは、ホットリロード開発環境を提供しています。

ホットリロード開発環境とは？

ローカル開発環境( http://localost:8080/ )でフロント側の開発しているとき、普通は以下を繰り返すと思います。

触ったことがある人ならわかると思いますが、
3. npmを再実行が結構なストレスになります...

1. ソースコードを編集
2. ソースコードを保存
3. npmを再実行
4. ブラウザをリロード

しかし、ホットリロードを取り入れると、以下のようにnpmをリロードする手間が要らなくなります。

1. ソースコードを編集
2. ソースコードを保存...した瞬間に、自動でnpmを再読込
3. ブラウザをリロード

開発環境構築

1. テンプレートをインストールする

git clone https://github.com/munron/mv3-vue-chrome-extension-template.git
cd mv3-vue-chrome-extension-template
npm install
npm run build
mv .env.sample .env

2. 拡張機能をパッケージ化

1. 拡張機能を開く
2. 拡張機能をパッケージ化をクリック
3. 拡張機能のルート ディレクトリにてインストールしたテンプレート内のdistディレクトリを選択
4. 拡張機能をパッケージ化をクリック
   dist.crxとdist.pemが生成されます。
5. dist.pemの内容を.envのVUE_APP_MV3_KEYに以下のようにコピー

VUE_APP_MV3_KEY="-----BEGIN PRIVATE KEY-----\nXXXXX.....XXXXXX\n....\nXXXXXX.....XXXXXXX\n-----END PRIVATE KEY-----"

Hot Reloadを起動する

1. 以下コマンドを実行

npm run dev