Can download in user-specified format. Stores last base 64 string so …

…its there even after being closed. Re-displays it onload as well.

README.md

@@ -3,20 +3,23 @@
 ### Description
 This is a browser extension that encodes and decodes media to and from Base64. It was created to help developers who want
 to use Base64 data strings instead of image or audio files. It is much faster and more convinient to use this extension rather than 
-uploading your local files to a server.
+uploading your local files to a server for processing.
 
 **Please note:**
 1. This project is limited to converting media supported by the Base64 standard
-2. Large files will take several seconds to process.
-3. This extension does not store any of your data for any reason.
+2. Large files will take several seconds to process
+3. This extension stores data in the following way:
+	- It saves the last entered base64 string so the user does not need to re-enter it when the extension opens back up
+	- The string is stored on the **user's computer** using the chrome.storage API
 
 ### Features
 - Select a file from your computer and encode it to a Base 64 string
+- Previews supported files
 - Convert a Base 64 string to the correct file type
-	- Download the file
+	- Download the file in any format
 
 ### Supported File Types
-This extension supports converting the following file types:
+This extension supports converting the following file types (several examples listed):
 
 - Images
 	- png
@@ -30,18 +33,23 @@ This extension supports converting the following file types:
 - Audio
 	- mpeg (mp3)
 	- ogg
+	- wav
 
 - Text
 	- txt
+	- html
 	- css
+	- js
+	- py
+	- cpp
+	- java
 
 ### Download
 This extension is updated and availible on the [Chrome Store](https://chrome.google.com/webstore/detail/base64-encoderdecoder/afdannbjainhcddbjjlhamdgnojibeoi).
 Alternatively you can download the latest source code [release](https://github.com/dandeto/Base-64-Extension/releases).
-That said, Chrome will prompt you to disable it every time you open the browser, so I highly advise downloading it from the store.
 
-Availible on [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/base64-encoder-decoder/). I suggest you use Chrome instead for now
-because Firefox has a bug that prematurely closes the popup window [bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1292701).
+Availible on [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/base64-encoder-decoder/). I suggest you use Chrome instead for
+now because Firefox has a bug that prematurely closes the popup window [bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1292701).
 
 ### Installation
 If you downloaded the source and want to run it as an extension, you need to do the following:

manifest.json

@@ -4,7 +4,7 @@
   "name": "Base64 Encoder/Decoder",
   "short_name": "Base64",
   "description": "Encodes and decodes media to and from Base64.",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "permissions": [
     "storage"
   ],

popup.css

@@ -1,4 +1,4 @@
-body{
+body {
   background-color: #353535;
   width: 700px;
 }
@@ -65,8 +65,54 @@ a {
   cursor: pointer;
 }
 
-.btn:focus{
-    outline: none;
+.btn:focus {
+  outline: none;
+}
+
+#file_type {
+  float: right;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-style: solid;
+  margin-top: -1%;
+  margin-right: 5.5%;
+  width: 120px;
+}
+
+#file_type[value] {
+}
+
+#file_type:focus {
+}
+
+#file_type::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  color: #a9ff00;
+  opacity: .75;
+}
+#file_type::-moz-placeholder { /* Firefox 19+ */
+  color: #a9ff00;
+  opacity: .75;
+}
+#file_type:-ms-input-placeholder { /* IE 10+ */
+  color: #a9ff00;
+  opacity: .75;
+}
+#file_type:-moz-placeholder { /* Firefox 18- */
+  color: #a9ff00;
+  opacity: .75;
+}
+
+#file_type:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  opacity: .5;
+}
+#file_type:focus::-moz-placeholder { /* Firefox 19+ */
+  opacity: .5;
+}
+#file_type:focus:-ms-input-placeholder { /* IE 10+ */
+  opacity: .5;
+}
+#file_type:focus:-moz-placeholder { /* Firefox 18- */
+  opacity: .5;
 }
 
 .cnvContainer {
@@ -149,5 +195,5 @@ textarea {
 }
 
 textarea:focus{
-    outline: none;
+  outline: none;
 }

popup.html

@@ -28,14 +28,14 @@ <h1>
         <canvas id="cnv" width="0" height="0"></canvas>
     </div>
     <br />
-    <input style="display:none;" accept=".jpg, .jpeg, .png, .bmp, .svg, .gif, .ico, .tiff, .tif, .mp3, .ogg, .txt, .css, .html" id="file" type="file"/>
+    <input style="display:none;" id="file" type="file"/>
     <label id="label" class="btn" for="file">Select a File</label><span id="fileName">[Filename]</span>
     <a class="btn" id="download" style="display:none;">Download</a>
     <input class="btn" type="button" value="Copy" id="copy">
     <input class="btn" type="button" value="Convert" id="convert" style="display:none;">
     <input class="btn" type="button" value="Clear" id="clear" style="display:none;">
     <select class="btn" id="fileTypeSelector" style="display:none;">
-    	<option>media type</option>
+    	<option>file type</option>
     	<option value="image/png">png</option>
     	<option value="image/jpeg">jpeg</option>
     	<option value="image/svg+xml">svg</option>
@@ -44,10 +44,15 @@ <h1>
         <option value="image/x-icon">ico</option>
         <option value="image/tiff">tiff</option>
         <option value="audio/mpeg">mpeg</option>
+        <option value="audio/wav">wav</option>
         <option value="video/ogg">ogg</option>
         <option value="text/plain">txt</option>
+        <option value="text/xml">xml</option>
         <option value="text/css">css</option>
+        <option value="text/html">html</option>
+        <option value="text/plain">js</option>
     </select>
+    <input type="text" placeholder="input file type (ex: .png)" id="file_type" class="btn" style="display:none;">
     <div class="cnvContainer">
         <textarea id="output" rows="10" spellcheck="false"></textarea>
     </div>

popup.js

@@ -10,6 +10,7 @@ var clear = document.getElementById("clear");
 var selector = document.getElementById("fileTypeSelector");
 var label = document.getElementById("label");
 var fileName = document.getElementById("fileName");
+var file_type = document.getElementById("file_type");
 var state, string,
 img, aud, fr, file, type, b64Type, created, fileType;
 var setting = 0;
@@ -24,6 +25,7 @@ to.addEventListener('click', function(event) {
   selector.style.display = "none";
   label.style.display = "inline-block";
   fileName.style.display = "inline-block";
+  file_type.style.display = "none";
 
 });
 from64.addEventListener('click', function(event) {
@@ -35,6 +37,7 @@ from64.addEventListener('click', function(event) {
   selector.style.display = "inline";
   label.style.display = "none";
   fileName.style.display = "none";
+  file_type.style.display = "inline-block";
 });
 
 clear.addEventListener('click', function(event) {
@@ -56,30 +59,30 @@ tobtn.addEventListener("click", find);
 
 function convert() {
   document.getElementById("fileName").textContent = input.files[0].name;
-  if (setting == 0) {
-    file = input.files[0];
-    fr = new FileReader();
-    var containsAudio = file.type.indexOf("audio");
-    var containsVideo = file.type.indexOf("video");
-    var containsImage = file.type.indexOf("image");
-    var containsText = file.type.indexOf("text");
-    if (containsAudio == 0) { //if audio
-      fr.onload = createAudio;
-      fileType = "audio";
-    } else if (containsVideo == 0) { //if video
-      fr.onload = createAudio;
-      fileType = "audio";
-    } else if (containsImage == 0) { // if image
-      fr.onload = createImage;
-      fileType = "image";
-    } else if (containsText == 0) { // if txt
-      fr.onload = createText; // onload fires after reading is complete
-      fileType = "text";
-    } else {
-      alert("File not supported.");
-    }
-    fr.readAsDataURL(file);
+  setting = 0;
+  file = input.files[0];
+  fr = new FileReader();
+  var containsAudio = file.type.indexOf("audio");
+  var containsVideo = file.type.indexOf("video");
+  var containsImage = file.type.indexOf("image");
+  var containsText = file.type.indexOf("text");
+  if (containsAudio == 0) { //if audio
+    fr.onload = createAudio;
+    fileType = "audio";
+  } else if (containsVideo == 0) { //if video
+    fr.onload = createAudio;
+    fileType = "audio";
+  } else if (containsImage == 0) { // if image
+    fr.onload = createImage;
+    fileType = "image";
+  } else if (containsText == 0) { // if txt
+    fr.onload = createText; // onload fires after reading is complete
+    fileType = "text";
+  } else {
+    alert("File not supported.");
+    fr.onload = createDefault;
   }
+  fr.readAsDataURL(file);
 }
 
 function find() {
@@ -100,17 +103,17 @@ function find() {
 
 function clearDisplay() {
 	if (created == "audio") {
-    	var el = document.getElementsByTagName("audio")[0];
-    	document.getElementById("cnvContainer").removeChild(el);
-  	} else if (created == "text") {
-    	var el = document.getElementsByTagName("textarea")[0];
-    	document.getElementById("cnvContainer").removeChild(el);
-  	} else {
-  		ctx.clearRect(0,0,canvas.width,canvas.height); //clean up canvas
-  		canvas.width = 0;
-  		canvas.height = 0;
-  	}
-    created = "";
+  	var el = document.getElementsByTagName("audio")[0];
+    document.getElementById("cnvContainer").removeChild(el);
+  } else if (created == "text") {
+  	var el = document.getElementsByTagName("textarea")[0];
+  	document.getElementById("cnvContainer").removeChild(el);
+  } else {
+  	ctx.clearRect(0,0,canvas.width,canvas.height); //clean up canvas
+  	canvas.width = 0;
+  	canvas.height = 0;
+  }
+   created = "";
 }
 
 function createImage() {
@@ -188,34 +191,52 @@ function createText() {
   created = "text";
 }
 
+function createDefault() {
+  clearDisplay();
+  out.value = window.btoa(fr.result);
+}
+
 function downloadCanvas(link) {
   var ext;
-  if (b64Type == undefined) { //needs to select download format
-    alert("Select a media type.");
+  file_type = document.getElementById("file_type");
+  if (file_type.value.indexOf(".") == 0) {
+    ext = file_type.value;
+  } else {
+    ext = "." + file_type.value;
   }
-  if (b64Type == "image/png") { ext = "png"}
-  if (b64Type == "image/jpeg") { ext = "jpg"}
-  if (b64Type == "image/bmp") { ext = "bmp"}
-  if (b64Type == "image/svg+xml") { ext = "svg"}
-  if (b64Type == "image/gif") { ext = "gif"}
-  if (b64Type == "image/gif") { ext = "tiff"}
-  if (b64Type == "image/x-icon") { ext = "ico"}
-  if (b64Type == "audio/mpeg") { ext = "mp3"}
-  if (b64Type == "video/ogg") { ext = "ogg"}
-  if (b64Type == "text/plain") { ext = "txt"}
-  if (b64Type == "text/css") { ext = "css"}
-  if (b64Type == "text/html") { ext = "html"}
-  if (b64Type == "text/javascript") { ext = "js"}
-  if (ext !== undefined) {
-    link.download = "converted_file." + ext;
+
+  if (file_type.value == undefined || file_type.value == "") {
+    if (b64Type == "image/png") { ext = ".png"}
+    if (b64Type == "image/jpeg") { ext = ".jpg"}
+    if (b64Type == "image/bmp") { ext = ".bmp"}
+    if (b64Type == "image/svg+xml") { ext = ".svg"}
+    if (b64Type == "image/gif") { ext = ".gif"}
+    if (b64Type == "image/tiff") { ext = ".tiff"}
+    if (b64Type == "image/x-icon") { ext = ".ico"}
+    if (b64Type == "audio/mpeg") { ext = ".mp3"}
+    if (b64Type == "audio/wav") { ext = ".wav"}
+    if (b64Type == "video/ogg") { ext = ".ogg"}
+    if (b64Type == "text/plain") { ext = ".txt"}
+    if (b64Type == "text/css") { ext = ".css"}
+    if (b64Type == "text/html") { ext = ".html"}
+    if (b64Type == "text/javascript") { ext = ".js"}
+  }
+console.log(ext)
+  if (ext == undefined || ext == "") { //needs to select download format
+    alert("Select a file type.");
+  } else {
+    link.download = "converted_file" + ext;
     link.href = out.value;
   }
 }
 
 (function () {
   chrome.storage.local.get(['key'], function(result) {
-    if (result.key !== undefined)
+    if (result.key !== undefined) {
       out.value = result.key;
+      setting = 1;
+      find();
+    }
   });
 
 }());