Merge pull request #1 from Ansonhkg/feat/encrypt

feat: add encryption option
Ansonhkg · Aug 3, 2024 · ee5ab05 · ee5ab05
2 parents 17ec61b + cf705e2
commit ee5ab05
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 15 deletions.
diff --git a/crypto-js.min.js b/crypto-js.min.js
diff --git a/manifest.json b/manifest.json
@@ -23,5 +23,8 @@
   },
   "background": {
     "service_worker": "background.js"
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
   }
 }
diff --git a/popup.html b/popup.html
@@ -1,32 +1,121 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Meine Cookies & LocalStorage Manager</title>
     <style>
       body {
+        font-family: Arial, sans-serif;
         width: 300px;
-        padding: 10px;
+        padding: 20px;
+        background-color: #f0f0f0;
+        margin: 0;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20px;
+      }
+      .header img {
+        width: 32px;
+        height: 32px;
+        margin-right: 10px;
+      }
+      h2 {
+        color: #333;
+        margin: 0;
+        font-size: 18px;
+      }
+      .section {
+        background-color: white;
+        padding: 15px;
+        margin-bottom: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .section-title {
+        font-weight: bold;
+        margin-bottom: 10px;
+        color: #444;
+      }
+      select,
+      input,
+      button {
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        box-sizing: border-box;
       }
       button {
-        margin: 5px;
+        background-color: #4caf50;
+        color: white;
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+      button:hover {
+        background-color: #45a049;
       }
       #status {
-        margin-top: 10px;
         color: green;
+        text-align: center;
+        margin-top: 10px;
       }
       #error {
-        margin-top: 10px;
         color: red;
+        text-align: center;
+        margin-top: 10px;
+      }
+      .hidden {
+        display: none;
       }
     </style>
   </head>
   <body>
-    <h2>Meine Cookies & LocalStorage Manager</h2>
-    <button id="exportBtn">Export Data</button>
-    <button id="importBtn">Import Data</button>
-    <input type="file" id="fileInput" style="display: none" />
+    <div class="header">
+      <img src="./biscuit_icon_128.png" alt="Biscuit Icon" />
+      <h2>Meine Cookies & LocalStorage Manager</h2>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Export Data</div>
+      <select id="exportType">
+        <option value="raw">Export Raw Data</option>
+        <option value="encrypted">Export Encrypted Data</option>
+      </select>
+      <input
+        type="password"
+        id="exportPassword"
+        placeholder="Password for export"
+        class="hidden"
+      />
+      <button id="exportBtn">Export Data</button>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Import Data</div>
+      <select id="importType">
+        <option value="raw">Import Raw Data</option>
+        <option value="encrypted">Import Encrypted Data</option>
+      </select>
+      <input
+        type="password"
+        id="importPassword"
+        placeholder="Password for import"
+        class="hidden"
+      />
+      <button id="importBtn">Choose File & Import</button>
+      <input type="file" id="fileInput" style="display: none" />
+    </div>
+
     <div id="status"></div>
     <div id="error"></div>
+
+    <script src="./crypto-js.min.js"></script>
     <script src="popup.js"></script>
   </body>
 </html>
diff --git a/popup.js b/popup.js
@@ -5,6 +5,28 @@ document
     document.getElementById("fileInput").click()
   );
 document.getElementById("fileInput").addEventListener("change", importData);
+document
+  .getElementById("exportType")
+  .addEventListener("change", toggleExportPassword);
+document
+  .getElementById("importType")
+  .addEventListener("change", toggleImportPassword);
+
+function toggleExportPassword() {
+  const passwordField = document.getElementById("exportPassword");
+  passwordField.classList.toggle(
+    "hidden",
+    document.getElementById("exportType").value === "raw"
+  );
+}
+
+function toggleImportPassword() {
+  const passwordField = document.getElementById("importPassword");
+  passwordField.classList.toggle(
+    "hidden",
+    document.getElementById("importType").value === "raw"
+  );
+}
 
 function showStatus(message) {
   document.getElementById("status").textContent = message;
@@ -16,7 +38,24 @@ function showError(message) {
   setTimeout(() => (document.getElementById("error").textContent = ""), 5000);
 }
 
+function encryptData(data, password) {
+  return CryptoJS.AES.encrypt(JSON.stringify(data), password).toString();
+}
+
+function decryptData(encryptedData, password) {
+  const bytes = CryptoJS.AES.decrypt(encryptedData, password);
+  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
+}
+
 function exportData() {
+  const exportType = document.getElementById("exportType").value;
+  const password = document.getElementById("exportPassword").value;
+
+  if (exportType === "encrypted" && !password) {
+    showError("Please enter a password for encryption");
+    return;
+  }
+
   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
     if (chrome.runtime.lastError) {
       showError("Error querying tabs: " + chrome.runtime.lastError.message);
@@ -83,14 +122,23 @@ function exportData() {
 
             console.log("Exporting data:", data);
 
-            const blob = new Blob([JSON.stringify(data, null, 2)], {
-              type: "application/json",
-            });
+            let exportData, fileType, fileName;
+            if (exportType === "encrypted") {
+              exportData = encryptData(data, password);
+              fileType = "application/octet-stream";
+              fileName = `${domain}_encrypted_data.bin`;
+            } else {
+              exportData = JSON.stringify(data, null, 2);
+              fileType = "application/json";
+              fileName = `${domain}_data.json`;
+            }
+
+            const blob = new Blob([exportData], { type: fileType });
             const url = URL.createObjectURL(blob);
             chrome.downloads.download(
               {
                 url: url,
-                filename: `${domain}_data.json`,
+                filename: fileName,
               },
               function (downloadId) {
                 if (chrome.runtime.lastError) {
@@ -113,11 +161,26 @@ function exportData() {
 }
 
 function importData(event) {
+  const importType = document.getElementById("importType").value;
+  const password = document.getElementById("importPassword").value;
+
+  if (importType === "encrypted" && !password) {
+    showError("Please enter a password for decryption");
+    return;
+  }
+
   const file = event.target.files[0];
   const reader = new FileReader();
   reader.onload = function (e) {
     try {
-      const data = JSON.parse(e.target.result);
+      let data;
+      if (importType === "encrypted") {
+        const encryptedData = e.target.result;
+        data = decryptData(encryptedData, password);
+      } else {
+        data = JSON.parse(e.target.result);
+      }
+
       console.log("Importing data:", data);
       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
         if (chrome.runtime.lastError) {
@@ -193,8 +256,12 @@ function importData(event) {
         );
       });
     } catch (error) {
-      showError("Error parsing imported data: " + error.message);
+      showError("Error processing imported data: " + error.message);
     }
   };
   reader.readAsText(file);
 }
+
+// Initialize visibility of password fields
+toggleExportPassword();
+toggleImportPassword();