はじめに
好きな作品を保存しておかないと、イラストレータさんが消しちゃうかもしれない！
でも、一枚一枚PNGファイルで保存されても困るし、PDFで保存したい！
というかPDFならkindleで読みたい！
対象拡張
スローガン
以下のスローガンをもとに開発いたしました！
ワンクリック
簡単操作でダウンロードがしたい！
一括
イラスト1枚=1ファイルでダウンロードされても...
まとめて見るならやっぱりPDFですよね！
kindle連携
スマホのkindleアプリでいつでも見たい！
使用方法
1. chrome拡張ページから「Pixiv downloader」を検索し、「Chromeから追加」をクリックします。
2. お好きなpixivの作品ページに移動し、ボタンをクリックします。
- PDFをダウンロードする場合：右上の青い「PDF」ボタンをクリックします。
-
kindleにアップロードする場合：右上の青い「kindleアイコン」ボタンをクリックします。
3. ダウンロード/アップロードされるのを待つだけ！
※kindleへのアップデートは、ファイルサイズによって時間がかかることがあります。
以上です♪
対象
本拡張で対象となるものを以下にまとめました。
今後の拡張のアップデートで追加していく予定です。
| PDFでダウンロード | kindleにアップロード | |
|---|---|---|
| イラスト | ○ | ○ |
| 小説 | ○(実装予定) | ○(実装予定) |
| イラストシリーズ | ○(実装予定) | ○(実装予定) |
| 小説シリーズ | ○(実装予定) | ○(実装予定) |
開発環境
以下テンプレートを使用して開発しました。
こちらのテンプレートでは、ホットリロード開発環境を提供しています。
ホットリロード開発環境とは？
ローカル開発環境( 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. 拡張機能をパッケージ化
- 拡張機能を開く
-
拡張機能をパッケージ化をクリック -
拡張機能のルート ディレクトリにてインストールしたテンプレート内のdistディレクトリを選択 -
拡張機能をパッケージ化をクリック
dist.crxとdist.pemが生成されます。 -
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を起動する
- 以下コマンドを実行
npm run dev