Sync

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Comics Goose",
-  "version": "0.4.3",
+  "version": "0.5.0",
 
   "applications":{
     "gecko": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comic_goose",
-  "version": "0.4.3",
+  "version": "0.5",
   "description": "No more webcomic woes",
   "main": "index.js",
   "type": "module",

resources/html/options.html

@@ -18,6 +18,14 @@
         </label>
         <div id="save-bookmarks-description">A browser bookmark will be created and kept up-to-date with your current position in the series</span>
       </fieldset>
+
+      <fieldset>
+        <input type="checkbox" name="use-sync" id="use-sync-checkbox" class="browser-style"/>
+        <label for="use-sync-checkbox">
+          Sync with other Firefox instances
+        </label>
+        <div id="use-sync-description">Keep your position up to date across multiple devices using Firefox Sync</div>
+      </fieldset>
     </form>
   </body>
 	<script src="../js/options.js" type="module"></script> 

resources/js/background.js

@@ -43,6 +43,11 @@ function onInstalledActions(details) {
 
     case 'update':
         console.log('User has updated their extension.');
+
+        if (previousVersion < 0.5){
+          let storageService = new StorageService();
+          storageService.addMissingUUIDs();
+        }
 
         if (previousVersion < 0.4){
           browser.notifications.create('onUpdated', {

resources/js/options.js

@@ -1,13 +1,17 @@
 import StorageService from "./services/storage.js";
 
 //Page Setup
-// const storageService = new StorageService();
-browser.storage.local.get('save_bookmarks').then(results => {
+const storageService = new StorageService();
+browser.storage.local.get(['save_bookmarks', 'use_sync']).then(results => {
     const save_bookmarks_checkbox = document.getElementById('save-bookmarks-checkbox');
+    const use_sync_checkbox = document.getElementById('use-sync-checkbox');
 
     save_bookmarks_checkbox.onclick = bookmarks_toggle_callback;
     save_bookmarks_checkbox.checked = results.save_bookmarks;
 
+    use_sync_checkbox.onclick = sync_toggle_callback;
+    use_sync_checkbox.checked = results.use_sync;
+
 });
 
 
@@ -28,3 +32,25 @@ export function bookmarks_toggle_callback(event) {
         }
     });
 }
+
+export async function sync_toggle_callback(event) {
+    /**
+     * When Sync toggle is clicked
+     */
+    const newSetting = event.target.checked;
+    console.debug('Setting "sync" setting to ' + newSetting);
+
+    let syncHasData = await storageService.doesSyncHasData();
+
+    await browser.storage.local.set({'use_sync': newSetting});
+    if (newSetting === true) {
+        if (!syncHasData) {
+            await storageService.copyLocalToSyncStorage();
+        } else {
+            // How do we handle this without the risk of overriding remote saved stuff
+            await storageService.mergeLocalIntoSync();
+        }
+    } else {
+        console.warn("Turning off not implemented yet lol")
+    }
+}

resources/js/services/storage.js

@@ -1,6 +1,11 @@
+import SyncService from "./sync.js";
+
 export default class StorageService {
+    constructor() {
+        this.syncService = new SyncService();
+    }
 
-    getComics(){
+    async getComics(){
         return browser.storage.local.get('comics').then(
             results => results.comics || [],
             error => {
@@ -10,13 +15,13 @@ export default class StorageService {
         );
     }
 
-    saveComic(title, url){
+    async saveComic(title, url) {
         if(!title || !url){
             throw new Error('Arguments are empty')
         }
 
         return this.getComics().then(comics => {
-            let newComic = {title, url};
+            let newComic = {title, url, uuid: crypto.randomUUID()};
 
             //check if this comic already exists
             for (let i = 0; i < comics.length; i++){
@@ -83,13 +88,13 @@ export default class StorageService {
                 return comics;
             });
 
-        }).then(comics => {
+        }).then(async comics => {
             if (!comics) {
                 throw new Error("Tried to save blank comics array");
             }
-            browser.storage.local.set({comics})
-        }
-        );        
+            await browser.storage.local.set({comics})
+            return comics;
+        }).then(comics => (this.syncService.mergeUp(comics)));        
     }
 
     deleteComic(title){
@@ -105,9 +110,9 @@ export default class StorageService {
             }
 
             //check if this comic already exists
-            for(let i = 0; i < comics.length; i++){
+            for (let i = 0; i < comics.length; i++) {
                 let comic = comics[i];
-                if(comic.title === title){
+                if (comic.title === title) {
                     comics.splice(i, 1);;
                     return comics;
                 }
@@ -116,8 +121,8 @@ export default class StorageService {
             //...and if it doesn't...
             throw new Error(`Tried to delete comic ${title} but no comic with that name!`);
 
-        }).then(comics => 
-            browser.storage.local.set({comics})
+        }).then(async comics => 
+            (await browser.storage.local()).set({comics})
         );
 
     }
@@ -136,12 +141,68 @@ export default class StorageService {
         return browser.storage.local.get('save_bookmarks').then(
             results => !!results.save_bookmarks,
             error => {
-                browser.storage.local.set({'save_bookmarks': true});
+                browser.storage.local.set({'save_bookmarks': false});
+                console.log('Bookmark setting missing, defaulting to false');
+            }
+        );
+    }
+
+    getSyncSetting() {
+        return browser.storage.local.get('use_sync').then(
+            results => results.use_sync,
+            error => {
+                browser.storage.local.set({'use_sync': true});
                 console.log('Bookmark setting missing, defaulting to true');
             }
         );
     }
 
+    async doesSyncHasData() {
+        let currentData = await browser.storage.sync.get("comics");
+        return (!!currentData.comics)
+    }
+
+    async copyLocalToSyncStorage() {
+        let results = await browser.storage.local.get("comics")
+        let localData = results["comics"];
+        await browser.storage.sync.set({"comics": localData});
+    }
+
+    async mergeLocalIntoSync() {
+        let localComics = (await browser.storage.local.get("comics"))["comics"];
+        let syncComics = (await browser.storage.sync.get("comics"))["comics"];
+        let newDict = mergeDictionaries(localComics, syncComics)
+
+        await browser.storage.sync.set("comics", newDict);
+    }
+
+    async addMissingUUIDs() {
+        let oldComics = await browser.storage.local.get("comics");
+        for (let comic of oldComics["comics"]) {
+            if (comic.uuid) {
+                continue;
+            }
+
+            comic.uuid = crypto.randomUUID();
+        }
+
+        await browser.storage.local.set("comics", oldComics);
+    }
+
+}
+
+function mergeDictionaries(newData, existingData) {
+    for (let newComic of newData) {
+        let existingComics = existingData.filter(savedComic => savedComic.uuid === newComic.uuid);
+        if (existingComics.length) {
+            // TODO: sort this properly
+            console.warn("Possible clash UNIMPLEMENTED")
+        }
+
+        existingData.push(newComic);
+
+    }
+    return existingData;
 }
 
 function extractHostname(url) {

resources/js/services/sync.js

@@ -0,0 +1,16 @@
+export default class SyncService {
+
+    /**
+     * Merge comics into sync
+     *
+     * @param {Object[]} comicsDict 
+     */
+    mergeUp(comicsDict) {
+
+        throw new Exception("Not implemented");
+    }
+
+    mergeDown() {
+        throw new Exception("Not implemented");
+    }
+}

spec/OptionsSpec.js

@@ -0,0 +1,14 @@
+// import options from "../resources/js/options.js"
+
+describe("Sync option", function () {
+    beforeEach(function(){});
+
+    it("should move local storage to sync if sync empty", () =>{
+        options.storageService = {};
+        options.sync_toggle_callback({target:{checked:true}});
+    });
+
+    it("should warn then merge if sync has content", () => {
+
+    });
+});