6 files changed, 65 insertions, 18 deletions

diff --git a/src/background/Application.ts b/src/background/Application.ts
index d5e7a67..da6bdfc 100644
--- a/src/background/Application.ts
+++ b/src/background/Application.ts
@@ -2,7 +2,7 @@ import { injectable } from 'tsyringe';
 import ContentMessageListener from './infrastructures/ContentMessageListener';
 import SettingController from './controllers/SettingController';
 import VersionController from './controllers/VersionController';
-import LocalSettingRepository from "./repositories/LocalSettingRepository";
+import SyncSettingRepository from "./repositories/SyncSettingRepository";
 
 @injectable()
 export default class Application {
@@ -10,7 +10,7 @@ export default class Application {
     private contentMessageListener: ContentMessageListener,
     private settingController: SettingController,
     private versionController: VersionController,
-    private localSettingRepository: LocalSettingRepository
+    private syncSettingRepository: SyncSettingRepository
   ) {
   }
 
@@ -25,7 +25,7 @@ export default class Application {
     });
 
     this.contentMessageListener.run();
-    this.localSettingRepository.onChange(() => {
+    this.syncSettingRepository.onChange(() => {
       this.settingController.reload();
     });
   }
diff --git a/src/background/repositories/LocalSettingRepository.ts b/src/background/repositories/LocalSettingRepository.ts
index 285b207..0c9ef3b 100644
--- a/src/background/repositories/LocalSettingRepository.ts
+++ b/src/background/repositories/LocalSettingRepository.ts
@@ -4,7 +4,7 @@ import SettingData from '../../shared/SettingData';
 @injectable()
 export default class LocalSettingRepository {
   async load(): Promise<SettingData | null> {
-    const { settings } = await browser.storage.local.get('settings');
+    const {settings} = await browser.storage.local.get('settings');
     if (!settings) {
       return null;
     }
@@ -22,4 +22,3 @@ export default class LocalSettingRepository {
     });
   }
 }
-
diff --git a/src/background/repositories/SyncSettingRepository.ts b/src/background/repositories/SyncSettingRepository.ts
new file mode 100644
index 0000000..9f59e61
--- /dev/null
+++ b/src/background/repositories/SyncSettingRepository.ts
@@ -0,0 +1,25 @@
+import { injectable } from 'tsyringe';
+import SettingData from '../../shared/SettingData';
+
+@injectable()
+export default class SyncSettingRepository {
+  async load(): Promise<SettingData | null> {
+    const { settings } = await browser.storage.sync.get('settings');
+    if (!settings) {
+      return null;
+    }
+    return SettingData.fromJSON(settings as any);
+  }
+
+  onChange(callback: () => void) {
+    browser.storage.onChanged.addListener((changes, area) => {
+      if (area !== 'sync') {
+        return;
+      }
+      if (changes.settings) {
+        callback();
+      }
+    });
+  }
+}
+
diff --git a/src/background/usecases/SettingUseCase.ts b/src/background/usecases/SettingUseCase.ts
index bd61157..02e1240 100644
--- a/src/background/usecases/SettingUseCase.ts
+++ b/src/background/usecases/SettingUseCase.ts
@@ -1,15 +1,17 @@
 import { injectable } from 'tsyringe';
 import LocalSettingRepository from '../repositories/LocalSettingRepository';
 import CachedSettingRepository from '../repositories/CachedSettingRepository';
-import { DefaultSettingData } from '../../shared/SettingData';
+import SettingData, { DefaultSettingData } from '../../shared/SettingData';
 import Settings from '../../shared/settings/Settings';
 import NotifyPresenter from '../presenters/NotifyPresenter';
+import SyncSettingRepository from "../repositories/SyncSettingRepository";
 
 @injectable()
 export default class SettingUseCase {
 
   constructor(
     private localSettingRepository: LocalSettingRepository,
+    private syncSettingRepository: SyncSettingRepository,
     private cachedSettingRepository: CachedSettingRepository,
     private notifyPresenter: NotifyPresenter,
   ) {
@@ -20,15 +22,12 @@ export default class SettingUseCase {
   }
 
   async reload(): Promise<Settings> {
-    let data;
+    let data = DefaultSettingData;
     try {
-      data = await this.localSettingRepository.load();
+      data = await this.loadSettings();
     } catch (e) {
       this.showUnableToLoad(e);
     }
-    if (!data) {
-      data = DefaultSettingData;
-    }
 
     let value: Settings;
     try {
@@ -41,6 +40,18 @@ export default class SettingUseCase {
     return value;
   }
 
+  private async loadSettings(): Promise<SettingData> {
+    const sync = await this.syncSettingRepository.load();
+    if (sync) {
+        return sync;
+    }
+    const local = await this.localSettingRepository.load();
+    if (local) {
+      return local;
+    }
+    return DefaultSettingData;
+  }
+
   private showUnableToLoad(e: Error) {
     console.error('unable to load settings', e);
     this.notifyPresenter.notifyInvalidSettings(() => {
diff --git a/src/settings/actions/setting.ts b/src/settings/actions/setting.ts
index 589ec36..93ca5f8 100644
--- a/src/settings/actions/setting.ts
+++ b/src/settings/actions/setting.ts
@@ -26,6 +26,7 @@ const save = async(data: SettingData): Promise<actions.SettingAction> => {
   return set(data);
 };
 
+
 const switchToForm = (json: JSONTextSettings): actions.SettingAction => {
   try {
     // toSettings exercise validation
diff --git a/src/settings/storage.ts b/src/settings/storage.ts
index f375e58..55cca96 100644
--- a/src/settings/storage.ts
+++ b/src/settings/storage.ts
@@ -1,20 +1,31 @@
 import SettingData, { DefaultSettingData } from '../shared/SettingData';
 
-export const load = async(): Promise<SettingData> => {
-  const { settings } = await browser.storage.local.get('settings');
-  if (!settings) {
-    return DefaultSettingData;
+const loadSettingData = async(): Promise<SettingData> => {
+  const { settings: syncSettings } = await browser.storage.sync.get('settings');
+  if (syncSettings) {
+    return SettingData.fromJSON(syncSettings as any);
   }
+  const { settings: localSettings } = await browser.storage.local.get('settings');
+  if (localSettings) {
+    return SettingData.fromJSON(localSettings as any);
+  }
+  return DefaultSettingData
+};
+
+export const load = async(): Promise<SettingData> => {
   try {
-    return SettingData.fromJSON(settings as any);
+    return loadSettingData();
   } catch (e) {
     console.error('unable to load settings', e);
     return DefaultSettingData;
   }
 };
 
-export const save = (data: SettingData) => {
-  return browser.storage.local.set({
+export const save = async (data: SettingData) => {
+  await browser.storage.local.set({
+    settings: data.toJSON(),
+  });
+  return browser.storage.sync.set({
     settings: data.toJSON(),
   });
 };