Added Export/Import Settings Sync https://github.com/libredirect/browser_extension/issues/576

3 files changed, 51 insertions, 11 deletions

diff --git a/src/manifest.json b/src/manifest.json
index e2f79bd3..d8736bbc 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "__MSG_extensionName__",
 	"description": "__MSG_extensionDescription__",
-	"version": "2.6.2",
+	"version": "2.6.3",
 	"manifest_version": 2,
 	"browser_specific_settings": {
 		"gecko": {
diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js
index 5b6c4bc6..db2a414e 100644
--- a/src/pages/options/widgets/general.js
+++ b/src/pages/options/widgets/general.js
@@ -16,7 +16,7 @@ async function setOption(option, type, event) {
 	browser.storage.local.set({ options })
 }
 
-let exportSettingsElement = document.getElementById("export-settings")
+const exportSettingsElement = document.getElementById("export-settings")
 async function exportSettings() {
 	const options = await utils.getOptions()
 	options.version = browser.runtime.getManifest().version
@@ -26,12 +26,16 @@ async function exportSettings() {
 	return
 }
 exportSettings()
-
 document.getElementById("general_page").onclick = exportSettings
 
-let importSettingsElement = document.getElementById("import-settings")
-let importSettingsElementText = document.getElementById("import_settings_text")
+const importSettingsElement = document.getElementById("import-settings")
+const importSettingsElementText = document.getElementById("import_settings_text")
 importSettingsElement.addEventListener("change", () => {
+	function importError() {
+		const oldHTML = importSettingsElementText.innerHTML
+		importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>'
+		setTimeout(() => (importSettingsElementText.innerHTML = oldHTML), 1000)
+	}
 	importSettingsElementText.innerHTML = "..."
 	let file = importSettingsElement.files[0]
 	const reader = new FileReader()
@@ -42,7 +46,6 @@ importSettingsElement.addEventListener("change", () => {
 			"theme" in data
 			&& data.version == browser.runtime.getManifest().version
 		) {
-
 			browser.storage.local.clear(async () => {
 				browser.storage.local.set({ options: data }, () => {
 					location.reload()
@@ -58,11 +61,32 @@ importSettingsElement.addEventListener("change", () => {
 		importError()
 	}
 })
-function importError() {
-	const oldHTML = importSettingsElementText.innerHTML
-	importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>'
-	setTimeout(() => (importSettingsElementText.innerHTML = oldHTML), 1000)
-}
+
+const exportSettingsSync = document.getElementById("export-settings-sync")
+exportSettingsSync.addEventListener("click", async () => {
+	let options = await utils.getOptions()
+	options.version = browser.runtime.getManifest().version
+	browser.storage.sync.set({ options }, () => location.reload())
+})
+
+const importSettingsSync = document.getElementById("import-settings-sync")
+const importSettingsSyncText = document.getElementById("import_settings_sync_text")
+importSettingsSync.addEventListener("click", () => {
+	function importError() {
+		importSettingsSyncText.innerHTML = '<span style="color:red;">Error!</span>'
+		setTimeout(() => (importSettingsSyncText.innerHTML = oldHTML), 1000)
+	}
+	const oldHTML = importSettingsSyncText.innerHTML
+	importSettingsSyncText.innerHTML = "..."
+	browser.storage.sync.get({ options }, r => {
+		const options = r.options
+		if (options.version == browser.runtime.getManifest().version) {
+			browser.storage.local.set({ options }, () => location.reload())
+		} else {
+			importError()
+		}
+	})
+})
 
 const resetSettings = document.getElementById("reset-settings")
 resetSettings.addEventListener("click", async () => {
diff --git a/src/pages/options/widgets/general.pug b/src/pages/options/widgets/general.pug
index 52ea21c2..cbc0129e 100644
--- a/src/pages/options/widgets/general.pug
+++ b/src/pages/options/widgets/general.pug
@@ -54,6 +54,22 @@ section(class="option-block" id="general_page")
             x(data-localise="__MSG_exportSettings__") Export Settings
         
         |&nbsp;&nbsp;
+
+        a(class="button button-inline" id="export-settings-sync")
+            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
+                path(d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z")
+            |&nbsp;
+            x() Export Settings to Sync
+        
+        |&nbsp;&nbsp;
+
+        a(class="button button-inline" id="import-settings-sync")
+            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
+                path(d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z")
+            |&nbsp;
+            x(id="import_settings_sync_text") Import Settings from Sync
+
+        |&nbsp;&nbsp;
         
         a(class="button button-inline" id="reset-settings")
             svg(xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")