Import / Export backups

package.json

@@ -13,7 +13,8 @@
     "@highlightjs/vue-plugin": "^1.0.2",
     "core-js": "^3.6.5",
     "highlight.js": "^10.7.3",
-    "lib-iitc-manager": "^1.6.1",
+    "jszip": "^3.10.1",
+    "lib-iitc-manager": "^1.7.0",
     "scored-fuzzysearch": "^1.0.5",
     "vue": "^2.6.11"
   },

public/_locales/en/messages.json

@@ -184,5 +184,59 @@
     },
     "jsViewDetailsHideDetails": {
         "message": "Hide details"
+    },
+    "other": {
+        "message": "Other"
+    },
+    "donate": {
+        "message": "Donate"
+    },
+    "backup": {
+        "message": "Backup"
+    },
+    "import": {
+        "message": "Import"
+    },
+    "export": {
+        "message": "Export"
+    },
+    "import_message": {
+        "message": "Select the .zip file with the IITC Button backup and then select what to import"
+    },
+    "import_settings": {
+        "message": "Import IITC settings"
+    },
+    "import_data": {
+        "message": "Import plugins data"
+    },
+    "import_external": {
+        "message": "Import of external plugins"
+    },
+    "importFromZip": {
+        "message": "Import from zip"
+    },
+    "export_settings": {
+        "message": "Export IITC settings"
+    },
+    "export_data": {
+        "message": "Export plugins data"
+    },
+    "export_external": {
+        "message": "Export of external plugins"
+    },
+    "exportToZip": {
+        "message": "Export to zip"
+    },
+    "pleaseWait": {
+        "message": "Please wait"
+    },
+    "restoreBackup": {
+        "message": "Restore backup"
+    },
+    "backupRestored": {
+        "message": "Backup restored"
+    },
+    "invalidBackup": {
+        "message": "The file is corrupted or is not a backup of IITC Button"
     }
 }

safari/IITC Button.xcodeproj/project.pbxproj

@@ -37,8 +37,8 @@
 		841A89B1270C6EFA0064B01F /* manifest.json in Resources */ = {isa = PBXBuildFile; fileRef = 841A899F270C6EFA0064B01F /* manifest.json */; };
 		841A89B2270C6EFA0064B01F /* css in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A0270C6EFA0064B01F /* css */; };
 		841A89B3270C6EFA0064B01F /* css in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A0270C6EFA0064B01F /* css */; };
-		841A89B4270C6EFA0064B01F /* choose_file.html in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A1270C6EFA0064B01F /* choose_file.html */; };
-		841A89B5270C6EFA0064B01F /* choose_file.html in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A1270C6EFA0064B01F /* choose_file.html */; };
+		841A89B4270C6EFA0064B01F /* settings.html in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A1270C6EFA0064B01F /* settings.html */; };
+		841A89B5270C6EFA0064B01F /* settings.html in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A1270C6EFA0064B01F /* settings.html */; };
 		841A89B6270C6EFA0064B01F /* assets in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A2270C6EFA0064B01F /* assets */; };
 		841A89B7270C6EFA0064B01F /* assets in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A2270C6EFA0064B01F /* assets */; };
 		841A89B8270C6EFA0064B01F /* _locales in Resources */ = {isa = PBXBuildFile; fileRef = 841A89A3270C6EFA0064B01F /* _locales */; };
@@ -138,7 +138,7 @@
 		841A899E270C6EFA0064B01F /* jsview.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; name = jsview.html; path = ../../../dist/jsview.html; sourceTree = "<group>"; };
 		841A899F270C6EFA0064B01F /* manifest.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; name = manifest.json; path = ../../../dist/manifest.json; sourceTree = "<group>"; };
 		841A89A0270C6EFA0064B01F /* css */ = {isa = PBXFileReference; lastKnownFileType = folder; name = css; path = ../../../dist/css; sourceTree = "<group>"; };
-		841A89A1270C6EFA0064B01F /* choose_file.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; name = choose_file.html; path = ../../../dist/choose_file.html; sourceTree = "<group>"; };
+		841A89A1270C6EFA0064B01F /* settings.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; name = settings.html; path = ../../../dist/settings.html; sourceTree = "<group>"; };
 		841A89A2270C6EFA0064B01F /* assets */ = {isa = PBXFileReference; lastKnownFileType = folder; name = assets; path = ../../../dist/assets; sourceTree = "<group>"; };
 		841A89A3270C6EFA0064B01F /* _locales */ = {isa = PBXFileReference; lastKnownFileType = folder; name = _locales; path = ../../../dist/_locales; sourceTree = "<group>"; };
 		84DAA697270D549A0086E511 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
@@ -202,7 +202,7 @@
 				841A899C270C6EFA0064B01F /* fonts */,
 				841A899D270C6EFA0064B01F /* js */,
 				841A8999270C6EFA0064B01F /* background.html */,
-				841A89A1270C6EFA0064B01F /* choose_file.html */,
+				841A89A1270C6EFA0064B01F /* settings.html */,
 				841A899B270C6EFA0064B01F /* index.html */,
 				841A899E270C6EFA0064B01F /* jsview.html */,
 				841A899A270C6EFA0064B01F /* popup.html */,
@@ -474,7 +474,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				841A89AE270C6EFA0064B01F /* jsview.html in Resources */,
-				841A89B4270C6EFA0064B01F /* choose_file.html in Resources */,
+				841A89B4270C6EFA0064B01F /* settings.html in Resources */,
 				841A89B0270C6EFA0064B01F /* manifest.json in Resources */,
 				841A89AC270C6EFA0064B01F /* js in Resources */,
 				841A89A8270C6EFA0064B01F /* index.html in Resources */,
@@ -493,7 +493,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				841A89AF270C6EFA0064B01F /* jsview.html in Resources */,
-				841A89B5270C6EFA0064B01F /* choose_file.html in Resources */,
+				841A89B5270C6EFA0064B01F /* settings.html in Resources */,
 				841A89B1270C6EFA0064B01F /* manifest.json in Resources */,
 				841A89AD270C6EFA0064B01F /* js in Resources */,
 				841A89A9270C6EFA0064B01F /* index.html in Resources */,

src/background/background.js

@@ -101,6 +101,33 @@
         // If tab is closed, message goes nowhere and an error occurs. Ignore.
       }
       break;
+    case "getBackupData":
+      try {
+        browser.runtime
+          .sendMessage({
+            type: "resolveGetBackupData",
+            data: await manager.getBackupData(request.params)
+          })
+          .then();
+      } catch {
+        // If tab is closed, message goes nowhere and an error occurs. Ignore.
+      }
+      break;
+    case "setBackupData":
+      try {
+        browser.runtime
+          .sendMessage({
+            type: "resolveSetBackupData",
+            data: await manager.setBackupData(
+              request.params,
+              request.backup_data
+            )
+          })
+          .then();
+      } catch {
+        // If tab is closed, message goes nowhere and an error occurs. Ignore.
+      }
+      break;
     case "setCustomChannelUrl":
       await manager.setCustomChannelUrl(request.value);
       break;
@@ -127,7 +154,7 @@
         code: injectedCode
       });
     } catch (error) {
       console.error(`An error occurred while execute script: ${error.message}`);
     }
   }
 

src/popup/App.vue

@@ -149,6 +149,24 @@ body#plugins #app.is_safari .section.plugins {
   display: block;
 }
 
+/*
+ * button
+ */
+.button {
+  cursor: pointer;
+  line-height: 28px;
+  padding: 0 10px;
+  background: #eee;
+  border-radius: 2px;
+  border: 1px solid #ccc;
+  transition: background 0.1s linear;
+}
+.button:hover,
+.button:active,
+.button:focus {
+  background: #f2f2f2;
+}
+
 :root {
   --color-white: #fff;
   --color-blue: #0074d9;

src/popup/components/Header.vue

@@ -51,19 +51,4 @@ export default {
   text-overflow: ellipsis;
   line-height: 32px;
 }
-
-.button {
-  cursor: pointer;
-  line-height: 28px;
-  padding: 0 10px;
-  background: #eee;
-  border-radius: 2px;
-  border: 1px solid #ccc;
-  transition: background 0.1s linear;
-}
-.button:hover,
-.button:active,
-.button:focus {
-  background: #f2f2f2;
-}
 </style>

src/popup/components/SectionOptions.vue

@@ -32,16 +32,18 @@
         <div class="input-field update-check">
           <UpdateCheckIntervalSelector
             v-bind:channel="'release'"
+            v-show="channel === 'release'"
           ></UpdateCheckIntervalSelector>
           <UpdateCheckIntervalSelector
             v-bind:channel="'beta'"
+            v-show="channel === 'beta'"
           ></UpdateCheckIntervalSelector>
           <UpdateCheckIntervalSelector
             v-bind:channel="'custom'"
+            v-show="channel === 'custom'"
           ></UpdateCheckIntervalSelector>
         </div>
       </div>
-      <Hr />
       <div class="settings__section">
         <h2>{{ _("updateExternalFrequency") }}</h2>
         <div class="input-field update-check">
@@ -60,6 +62,23 @@
           ></InputCustomServer>
         </div>
       </div>
+      <Hr />
+      <div class="settings__section">
+        <h2>{{ _("other") }}</h2>
+        <div class="input-field">
+          <div class="button" @click="openLink('/settings.html#backup')">
+            {{ _("backup") }}
+          </div>
+        </div>
+        <div class="input-field external-links">
+          <div class="button" @click="openLink('https://iitc.app')">
+            {{ _("iitcHomePage") }}
+          </div>
+          <div class="button" @click="openLink('https://iitc.app/donate')">
+            {{ _("donate") }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -93,6 +112,7 @@ export default {
       },
       set: async function(channel) {
         this.$emit("update:channel", channel);
+        this.channel = channel;
         this.$root.channel = channel;
         await browser.runtime.sendMessage({
           type: "setChannel",
@@ -203,4 +223,18 @@ h2:first-letter {
   background: #555555;
   border-color: #555555;
 }
+
+.external-links {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.external-links .button {
+  width: calc(50% - 5px);
+  box-sizing: border-box;
+  background: #555555;
+  color: #fff;
+  border: 1px solid #555;
+}
 </style>

src/popup/components/Title.vue

@@ -14,7 +14,7 @@
     <div
       class="title__button"
       :title="_('addExternalPlugin')"
-      v-on:click="openLink('/choose_file.html')"
+      v-on:click="openLink('/settings.html#add')"
     >
       <i class="title__icon material-icons">add</i>
     </div>

src/popup/components/ToggleIITC.vue

@@ -7,7 +7,7 @@
       class="toggle"
       v-model="iitc_is_enabled_toggle"
     />
-    <div class="button">
+    <div class="toggle_button">
       <div class="toggle">
         <label for="toggleIITC" class="toggle"></label>
       </div>
@@ -47,11 +47,11 @@ export default {
 </script>
 
 <style scoped>
-.button {
+.toggle_button {
   color: var(--color-white);
   border-left: 1px solid #333;
 }
-.button:hover {
+.toggle_button:hover {
   background: #333;
 }
 .toggle {
@@ -74,15 +74,15 @@ input[type="checkbox"].toggle + div label.toggle:before {
   display: inline-block;
   content: "\e9f5";
 } /* unchecked icon */
-input[type="checkbox"].toggle + .button {
+input[type="checkbox"].toggle + .toggle_button {
   background: var(--state-off);
   transition: background 0.1s ease-in-out;
 }
 
 input[type="checkbox"].toggle:checked + div label.toggle:before {
   content: "\e9f6";
 } /* checked icon */
-input[type="checkbox"].toggle:checked + .button {
+input[type="checkbox"].toggle:checked + .toggle_button {
   background: var(--state-on);
 }
 </style>