feat: 全てのファイルを1つのフォルダーにダウンロードできるようにする (#497)

* feat: 全てのファイルを1つのフォルダに保存するためのオプション設定を追加 * feat: 全てのファイルを1つのフォルダーにダウンロードできるようにする
mnao305 · Dec 26, 2023 · a548c74 · a548c74
1 parent 6a659a5
commit a548c74
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 9 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -6,6 +6,15 @@
     "message": "Download All"
   },
   "download_everything_from_a_post": {
-    "message": "download everything from a post(β)"
+    "message": "download everything from a post"
+  },
+  "all_file_one_folder" : {
+    "message": "全てのファイルを1つのフォルダに保存する"
+  },
+  "all_file_one_folder_description" : {
+    "message": "このオプションを有効にすると、クリエイター・記事毎にフォルダー分けがされず、1つのフォルダに全てのファイルが保存されます。"
+  },
+  "save": {
+    "message": "Save"
   }
 }
diff --git a/src/_locales/ja/messages.json b/src/_locales/ja/messages.json
@@ -6,6 +6,15 @@
     "message": "一括DL"
   },
   "download_everything_from_a_post": {
-    "message": "この投稿の全てをダウンロード(β)"
+    "message": "この投稿の全てをダウンロード"
+  },
+  "all_file_one_folder" : {
+    "message": "全てのファイルを1つのフォルダに保存する"
+  },
+  "all_file_one_folder_description" : {
+    "message": "このオプションを有効にすると、クリエイター・記事毎にフォルダー分けがされず、1つのフォルダに全てのファイルが保存されます。"
+  },
+  "save": {
+    "message": "保存"
   }
 }
diff --git a/src/background/index.ts b/src/background/index.ts
@@ -1,4 +1,5 @@
 import { browser, Downloads } from 'webextension-polyfill-ts'
+import { Settings } from '../options'
 
 /**
  * 与えられた文字列からunicode制御文字を取り除く
@@ -26,10 +27,32 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
     .catch(err => { console.error(err) })
 })
 
-export const download = (url: string, filename: string, filepath: string): void => {
+/**
+ * 1つのフォルダに全てのファイルを保存する場合のファイル名を生成する
+ */
+const generateOneFolderFileName = (filepath: string, filename: string) => {
+  const splitFilepath = filepath.split('/')
+  const fanclubName = splitFilepath[0].split('_')[1]
+  const titleName = splitFilepath[1].split('_')[1]
+  return `${fanclubName}_${titleName}_${removeControlCharacters(filename)}`
+}
+
+export const download = async (url: string, filename: string, filepath: string): Promise<void> => {
+  const { allFileOneFolder } = (await browser.storage.local.get({
+    allFileOneFolder: false
+  })) as Settings
+  // 保存先の設定
+  const downloadFilename = allFileOneFolder
+  // 1つのフォルダーに全てのファイルを保存する場合
+    ? generateOneFolderFileName(filepath, filename)
+    //
+    : `${removeControlCharacters(filepath)}/${removeControlCharacters(
+        filename
+      )}`
+
   const options: Downloads.DownloadOptionsType = {
     url,
-    filename: `fantia/${removeControlCharacters(filepath)}/${removeControlCharacters(filename)}`,
+    filename: `fantia/${downloadFilename}`,
     saveAs: false,
     conflictAction: 'overwrite'
   }

diff --git a/src/content/modules/download.ts b/src/content/modules/download.ts
@@ -22,10 +22,10 @@ import { browser } from 'webextension-polyfill-ts'
 export const fileDownload = (url: string, filepath: string, filename: string): Promise<void> => {
   const sendData = {
     msg: 'download',
-    url: url,
+    url,
     // ガチャコン絵文字が入るとエラーになるので分割します
     filepath: filepath.replaceAll('\u200d', ''),
-    filename: filename
+    filename
   }
   return browser.runtime.sendMessage(sendData)
 }
diff --git a/src/manifest.json b/src/manifest.json
@@ -25,8 +25,14 @@
     ],
     "persistent": false
   },
+  "options_ui": {
+    "page": "options/index.html",
+    "chrome_style": true,
+    "browser_style": true
+  },
   "permissions": [
     "downloads",
-    "contextMenus"
+    "contextMenus",
+    "storage"
   ]
 }
diff --git a/src/options/index.html b/src/options/index.html
@@ -1,14 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Option</title>
   <link rel="stylesheet" href="style.css">
 </head>
-<body>
-  <div id="app">
 
+<body>
+  <div id="setting">
+    <ul>
+      <li>
+        <div>
+          <label title="all_file_one_folder_description"><input type="checkbox" name="allFileOneFolder"><span data-locale="all_file_one_folder"></span></label>
+        </div>
+      </li>
+    </ul>
+    <button id="save">保存</button><span id="saveMsg">saved...</span>
   </div>
+
   <script src="index.js"></script>
 </body>
+
 </html>
diff --git a/src/options/index.ts b/src/options/index.ts
@@ -0,0 +1,63 @@
+import { browser } from 'webextension-polyfill-ts'
+
+export type Settings = {
+  allFileOneFolder: boolean;
+};
+
+/**
+ * オプション画面が開かれたときに呼ばれる
+ */
+const setup = async () => {
+  // 翻訳文言を入れる
+  document.querySelectorAll<HTMLElement>('[data-locale]').forEach((elem) => {
+    elem.innerText = elem.dataset.locale
+      ? browser.i18n.getMessage(elem.dataset.locale)
+      : ''
+  })
+  // title属性がある場合はそれも入れる
+  document.querySelectorAll<HTMLElement>('[title]').forEach((elem) => {
+    elem.title = elem.title ? browser.i18n.getMessage(elem.title) : ''
+  })
+
+  // 保存済みの設定を表示に反映
+  const settings = (await browser.storage.local.get({
+    allFileOneFolder: false
+  })) as Settings
+
+  for (const key in settings) {
+    const setting = settings[key as keyof Settings]
+    const inputEl = document.querySelector<HTMLInputElement>(`[name="${key}"]`)
+    if (!inputEl) continue
+
+    if (typeof setting === 'boolean') {
+      inputEl.checked = setting
+    }
+  }
+}
+
+setup()
+
+/**
+ * オプション画面で設定を変更したときに呼ばれる
+ */
+const save = async () => {
+  console.log('save')
+  const settings: Settings = {
+    allFileOneFolder:
+      document.querySelector<HTMLInputElement>('[name="allFileOneFolder"]')
+        ?.checked ?? false
+  }
+
+  await browser.storage.local.set(settings)
+
+  // 保存完了を表示
+  const saveMsg = document.querySelector<HTMLDivElement>('#saveMsg')
+  saveMsg!.style.display = 'inline-block'
+  setTimeout(() => {
+    saveMsg!.style.display = 'none'
+  }, 2000)
+}
+
+document
+  .querySelector<HTMLButtonElement>('#save')
+  ?.addEventListener('click', save)
diff --git a/src/options/style.css b/src/options/style.css
@@ -0,0 +1,13 @@
+ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+input {
+  margin-right: 6px;
+}
+
+#saveMsg {
+  display: none;
+  margin-left: 6px;
+}