Add optional download sub-directory #58

source/common.js

@@ -348,7 +348,7 @@ function downloadFile(name, data, overwrite, callback) { // overwrite is not use
 	if(chrome.downloads) {
 		chrome.downloads.download({
 			url: data,
-			filename: name,
+			filename: settings.directory + name,
 			method: "GET",
 			conflictAction: (overwrite ? "overwrite" : "uniquify")
 		}, function(downloadId) {

source/manifest.json

@@ -42,7 +42,7 @@
 		"run_at": "document_end"
 	}],
 
-	"options_page": "options.html",
+	"options_page": "options/options.html",
 
 	"web_accessible_resources": ["blankLogo.png"]
 }

source/options/options.css

@@ -0,0 +1,114 @@
+@font-face {
+	font-family: League-Gothic;
+	src: url("League-Gothic.otf") format("opentype");
+}
+
+body {
+	text-align: center;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	line-height: 50px;
+	cursor: default;
+	font-size: 14px;
+	margin: 0;
+	padding: 0;
+	padding-bottom: 40px;
+	color: #3b3a3a;
+}
+
+#content {
+	margin: 0;
+	padding: 0;
+	visibility: hidden;
+}
+
+h1 {
+	margin-top: 0;
+	margin-bottom: 20px;
+	padding: 0;
+	height: 200px;
+	background-image: linear-gradient(-180deg, #3583AE 0%, #2DAF7E 100%);
+}
+
+h1 img {
+	width: 200px;
+	height: 200px;
+}
+
+h2 {
+	color: #3583ae;
+	font-size: 35px;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-family: League-Gothic, Courier;
+	text-shadow: 1px 1px 0 #ffffff, 3px 3px 0 #2daf7e;
+	margin-top: 30px;
+	margin-bottom: 10px;
+}
+
+select, input {
+	background: #eddfca;
+	border-radius: 3px;
+	background-image: linear-gradient(-180deg, #FCF8F2 0%, #DDBA89 61%);
+	border: 2px solid #3B3A3A;
+	font-size: 13px;
+	outline: none;
+	padding: 5px;
+	text-align: center;
+}
+select:active, input:active, input:focus {
+	box-shadow: 0 0 10px #3b3a3a;
+}
+
+input[type=text] {
+	background: #ffffff;
+	color: #3b3a3a;
+	text-align: left;
+	background-image: none;
+	width: 350px;
+	border-width: 1px;
+}
+
+.aligner input[type=text] {
+	width: 200px;
+}
+
+p, section {
+	position: relative;
+	width: 600px;
+	margin: 10px auto;
+	line-height: 20px;
+}
+
+section {
+	margin-top: 40px;
+	text-align: justify;
+}
+
+div.aligner {
+	position: relative;
+	display: inline-block;
+	min-width: 240px;
+	margin: 0 5px;
+	text-align: right;
+}
+div.aligner.r {
+	text-align: left;
+}
+
+#pageSwapDelay, #pageSkipDelay {
+	width: 50px;
+	text-align: right;
+}
+
+#credits {
+	font-size: 10px;
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	text-decoration: none;
+	color: #3ef4b1;
+	line-height: 12px;
+}
+#credits:hover {
+	color: #ffffff;
+}

source/options.html → source/options/options.html

@@ -4,121 +4,9 @@
 	<meta charset="utf-8">
 	<title>Comic Backup</title>
 	<!-- This file, in conjunction with toast.js, will create the toast alert. It is distributed under The MIT License (http://opensource.org/licenses/mit-license.php), and all credit for development goes to https://github.com/CodeSeven/toastr -->
-	<link href="toastr.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="toastr.css">
+	<link rel="stylesheet" href="options.css">
 	<script src="jquery-2.1.4.min.js"></script>
-	<style type="text/css">
-
-		@font-face {
-			font-family: League-Gothic;
-			src: url("League-Gothic.otf") format("opentype");
-		}
-
-		body {
-			text-align: center;
-			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-			line-height: 50px;
-			cursor: default;
-			font-size: 14px;
-			margin: 0;
-			padding: 0;
-			padding-bottom: 40px;
-			color: #3b3a3a;
-		}
-
-		#content {
-			margin: 0;
-			padding: 0;
-			visibility: hidden;
-		}
-
-		h1 {
-			margin-top: 0;
-			margin-bottom: 20px;
-			padding: 0;
-			height: 200px;
-			background-image: linear-gradient(-180deg, #3583AE 0%, #2DAF7E 100%);
-		}
-
-		h1 img {
-			width: 200px;
-			height: 200px;
-		}
-
-		h2 {
-			color: #3583ae;
-			font-size: 35px;
-			text-transform: uppercase;
-			letter-spacing: 1px;
-			font-family: League-Gothic, Courier;
-			text-shadow: 1px 1px 0 #ffffff, 3px 3px 0 #2daf7e;
-			margin-top: 30px;
-			margin-bottom: 10px;
-		}
-
-		select, input {
-			background: #eddfca;
-			border-radius: 3px;
-			background-image: linear-gradient(-180deg, #FCF8F2 0%, #DDBA89 61%);
-			border: 2px solid #3B3A3A;
-			font-size: 13px;
-			outline: none;
-			padding: 5px;
-			text-align: center;
-		}
-		select:active, input:active, input:focus {
-			box-shadow: 0 0 10px #3b3a3a;
-		}
-
-		input[type=text] {
-			background: #ffffff;
-			color: #3b3a3a;
-			text-align: left;
-			background-image: none;
-			width: 350px;
-			border-width: 1px;
-		}
-
-		p, section {
-			position: relative;
-			width: 600px;
-			margin: 10px auto;
-			line-height: 20px;
-		}
-
-		section {
-			margin-top: 40px;
-			text-align: justify;
-		}
-
-		div.aligner {
-			position: relative;
-			display: inline-block;
-			min-width: 240px;
-			margin: 0 5px;
-			text-align: right;
-		}
-		div.aligner.r {
-			text-align: left;
-		}
-
-		#pageSwapDelay, #pageSkipDelay {
-			width: 50px;
-			text-align: right;
-		}
-
-		#credits {
-			font-size: 10px;
-			position: absolute;
-			top: 10px;
-			right: 10px;
-			text-decoration: none;
-			color: #3ef4b1;
-			line-height: 12px;
-		}
-		#credits:hover {
-			color: #ffffff;
-		}
-	</style>
 </head>
 <body>
 	<a href="https://github.com/Cortys" target="_blank" id="credits">v2.4.0 by <b>Cortys</b></a>
@@ -150,7 +38,7 @@ <h2>Backup behaviour</h2>
 			<option value="3">Dashes instead of spaces</option>
 			<option value="4">Remove spaces</option>
 		</select></div><br>
-		<div class="aligner">Max. parallel downloads per tab:</div><div class="aligner r"><select id="queueLength"  data-message="update_queue">
+		<div class="aligner">Max. parallel downloads per tab:</div><div class="aligner r"><select id="queueLength" data-message="update_queue">
 		 	<option value="1">1</option>
 		 	<option value="2">2</option>
 		 	<option value="3">3</option>
@@ -160,9 +48,15 @@ <h2>Backup behaviour</h2>
 		 	<option value="-1">Unlimited</option>
 		</select></div><br>
 		<p><i>If the limit is reached, every new download will be queued.</i></p>
+		<div class="aligner">Download Directory:</div><div class="aligner r">
+			<input placeholder="" type="text" id="directory">
+		</div><br>
+		<p><i>Please note, because of limitations of the extensions API, this will be a subdirectory of the default downloads folder.</i></p>
+
 		<h2>Updates</h2>
 		<p>To get notifications about extension updates, you have to add an update server.</p>
 		<input placeholder="Update Server URL" type="text" id="updateServer">
+
 		<h2>I need help!</h2>
 		<section><b>How is "Scan" different from the official backup options?</b> When you backup a comic with this extension, it takes high quality screenshots from the web reader. Those are quite good but do not match the quality of the official downloads. You should use "Scan" if you want to have smaller files or a comic is not officially available for download.</section>
 		<section><b>The download never starts!</b> To use the extension make sure you disabled the <i>Prompt to continue</i> message in the settings of the web reader (click the gear to get there).</section>

source/options.js → source/options/options.js

@@ -15,7 +15,9 @@ for(var i = 0; i < selects.length; i++)
 					toastr.success("Changes saved.");
 
 				if(e.id === "updateServer")
-					o[e.id] = e.value.charAt(e.value.length - 1) == "/" ? e.value.substr(0, e.value.length - 1) : e.value;
+					o[e.id] = e.value.charAt(e.value.length - 1) === "/" ? e.value.substr(0, e.value.length - 1) : e.value;
+				else if(e.id === "directory")
+					o[e.id] = e.value.length > 1 && e.value.charAt(e.value.length - 1) !== "/" ? e.value + "/" : e.value;
 				else {
 					o[e.id] = e.value * 1;
 					if(!Number.isFinite(o[e.id]))