Implement Dropbox export (openstyles#82)

matheusfaustino · matheusfaustino · commit 720791232d7c · 2018-06-02T11:50:27.000-03:00
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -1182,10 +1182,25 @@
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"
   },
   "bckpInstStyles": {
-      "message": "Export styles"
+    "message": "Export styles"
   },
   "retrieveBckp": {
-      "message": "Import styles"
+    "message": "Import styles"
+  },
+  "bckpDropboxStyles": {
+    "message": "Dropbox Export"
+  },
+  "retrieveDropboxBckp": {
+    "message": "Dropbox Import"
+  },
+  "overwriteFileExport": {
+    "message": "Do you want to overwrite an existing file?"
+  },
+  "exportSavedSuccess": {
+    "message": "File saved with success"
+  },
+  "noFileToImport": {
+    "message": "You don't have a file to import."
   },
   "optionsBadgeNormal": {
     "message": "Background color"
diff --git a/dropbox-oauth.html b/dropbox-oauth.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OAuth Receiver</title>
+
+  <script src="/vendor/dropbox/dropbox.min.js"></script>
+  <script src="/js/dropbox-auth-receiver.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/js/dropbox-auth-receiver.js b/js/dropbox-auth-receiver.js
@@ -0,0 +1,61 @@
+'use strict';
+
+/**
+ got from the old api
+ @see: https://github.com/dropbox/dropbox-sdk-js/blob/a88a138c0c3260c3537f30f94b003c1cf64f2fbd/examples/javascript/utils.js
+ */
+function parseQueryString(str) {
+  let ret = Object.create(null);
+
+  if (typeof str !== 'string') {
+    return ret;
+  }
+
+  str = str.trim().replace(/^(\?|#|&)/, '');
+
+  if (!str) {
+    return ret;
+  }
+
+  str.split('&').forEach(function (param) {
+    let parts = param.replace(/\+/g, ' ').split('=');
+    // Firefox (pre 40) decodes `%3D` to `=`
+    // https://github.com/sindresorhus/query-string/pull/37
+    let key = parts.shift();
+    let val = parts.length > 0 ? parts.join('=') : undefined;
+
+    key = decodeURIComponent(key);
+
+    // missing `=` should be `null`:
+    // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
+    val = val === undefined ? null : decodeURIComponent(val);
+
+    if (ret[key] === undefined) {
+      ret[key] = val;
+    } else if (Array.isArray(ret[key])) {
+      ret[key].push(val);
+    } else {
+      ret[key] = [ret[key], val];
+    }
+  });
+
+  return ret;
+}
+
+window.onload = () => {
+
+  let data = {'dropbox_access_token': parseQueryString(location.hash).access_token};
+
+  /* this was the only way that worked in keeping a value from page to page with location.href */
+  /* tried localStorage, but didn't work :/ */
+  if (typeof browser !== 'undefined') {
+    browser.storage.local.set(data)
+    .then(() => {
+      window.location.href = '/manage.html';
+    });
+  } else if (chrome.storage) {
+    chrome.storage.local.set(data, () => {
+      window.location.href = '/manage.html';
+    });
+  }
+}
diff --git a/manage.html b/manage.html
@@ -161,10 +161,14 @@ <h2 class="style-name">
   <script src="manage/updater-ui.js" async></script>
   <script src="manage/object-diff.js" async></script>
   <script src="manage/import-export.js" async></script>
+
   <script src="manage/incremental-search.js" async></script>
   <script src="msgbox/msgbox.js" async></script>
   <script src="js/sections-equal.js" async></script>
   <script src="js/storage-util.js" async></script>
+
+  <script src="vendor/dropbox/dropbox-sdk.js" async></script>
+  <script src="manage/import-export-dropbox.js" async></script>
 </head>
 
 <body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
@@ -355,6 +359,10 @@ <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
       <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
       <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
     </p>
+    <p>
+      <button id="sync-dropbox-export" i18n-text="bckpDropboxStyles"></button>
+      <button id="sync-dropbox-import" i18n-text="retrieveDropboxBckp"></button>
+    </p>
   </details>
 
   <p id="manage-text">
diff --git a/manage/import-export-dropbox.js b/manage/import-export-dropbox.js
@@ -0,0 +1,152 @@
+'use strict';
+
+const DROPBOX_RECEIVER_HTML = '/dropbox-oauth.html';
+const DROPBOX_API_KEY = 'uyfixgzre8v1bkg';
+const FILENAME = 'stylus.json';
+const API_ERROR_STATUS_FILE_NOT_FOUND = 409;
+const HTTP_STATUS_CANCEL = 499;
+
+/**
+  * this was the only way that worked in keeping a value from page to page with location.href (oauth return)
+  * tried localStorage, but didn't work :/
+ */
+function hasDropboxAccessToken() {
+  if (typeof browser !== 'undefined') { /* firefox */
+    return browser.storage.local.get('dropbox_access_token')
+    .then(item => {
+      return item.dropbox_access_token;
+    });
+  } else { /* chrome */
+    return new Promise((resolve, reject) => {
+      chrome.storage.local.get(['dropbox_access_token'], result => {
+        resolve(result.dropbox_access_token);
+      });
+    });
+  }
+}
+
+function openDropboxOauthPage() {
+  let client = new Dropbox.Dropbox({clientId: DROPBOX_API_KEY});
+  let authUrl = client.getAuthenticationUrl(window.location.origin + DROPBOX_RECEIVER_HTML);
+
+  window.location.href = authUrl;
+}
+
+function uploadFileDropbox(client, stylesText) {
+  return client.filesUpload({path: '/' + FILENAME, contents: stylesText});
+}
+
+
+$('#sync-dropbox-export').onclick = async () => {
+  let accessToken = await hasDropboxAccessToken();
+  if (!accessToken) {
+    openDropboxOauthPage();
+
+    return;
+  }
+
+  let client = new Dropbox.Dropbox({
+    clientId: DROPBOX_API_KEY,
+    accessToken: accessToken
+  });
+
+  /**
+   * check if the file exists, if exists, delete it before upload another
+   */
+  client.filesDownload({path: '/' + FILENAME})
+  .then(responseGet => {
+    /** deletes file if user want to */
+    if (!confirm(t('overwriteFileExport'))) {
+      return Promise.reject({status: HTTP_STATUS_CANCEL});
+    }
+
+    return client.filesDelete({path: '/' + FILENAME});
+  })
+  .then(responseDelete => {
+    /** file deleted with success, get styles and create a file */
+    return API.getStyles().then(styles => JSON.stringify(styles, null, '\t'))
+  })
+  .then(stylesText => {
+    /** create file dropbox */
+    return uploadFileDropbox(client, stylesText);
+  })
+  .then(responseSave => {
+    alert(t('exportSavedSuccess'));
+  })
+  .catch(async error => {
+    /* saving file first time */
+    if (error.status === API_ERROR_STATUS_FILE_NOT_FOUND) {
+      let stylesText = await API.getStyles().then(styles => JSON.stringify(styles, null, '\t'));
+
+      uploadFileDropbox(client, stylesText)
+      .then(response => {
+        alert(t('exportSavedSuccess'));
+      })
+      .catch(err => {
+        console.error(error);
+      });
+
+      return;
+    }
+
+    /* user cancelled the flow */
+    if (error.status === HTTP_STATUS_CANCEL) {
+      return;
+    }
+
+    console.error(error);
+
+    return;
+  });
+
+};
+
+$('#sync-dropbox-import').onclick = async () => {
+
+  let accessToken = await hasDropboxAccessToken();
+  if (!accessToken) {
+    openDropboxOauthPage();
+
+    return;
+  }
+
+  let client = new Dropbox.Dropbox({
+    clientId: DROPBOX_API_KEY,
+    accessToken: accessToken
+  });
+
+  client.filesDownload({path: '/' + FILENAME})
+  .then(response => {
+    let fileBlob = response.fileBlob;
+
+    /* it's based on the import-export.js */
+    const fReader = new FileReader();
+    fReader.onloadend = event => {
+      const text = event.target.result;
+      const maybeUsercss = !/^[\s\r\n]*\[/.test(text) &&
+        (text.includes('==UserStyle==') || /==UserStyle==/i.test(text));
+
+      (!maybeUsercss ?
+        importFromString(text) :
+        getOwnTab().then(tab => {
+          tab.url = URL.createObjectURL(new Blob([text], {type: 'text/css'}));
+          return API.installUsercss({direct: true, tab})
+            .then(() => URL.revokeObjectURL(tab.url));
+        })
+      );
+    };
+    fReader.readAsText(fileBlob, 'utf-8');
+  })
+  .catch(error => {
+    /* no file */
+    if (error.status === API_ERROR_STATUS_FILE_NOT_FOUND) {
+      alert(t('noFileToImport'));
+
+      return;
+    }
+
+    console.error(err);
+  });
+
+  return;
+};
diff --git a/manifest.json b/manifest.json
@@ -77,6 +77,9 @@
       "js": ["content/install-hook-usercss.js"]
     }
   ],
+  "web_accessible_resources": [
+    "/dropbox-oauth.html"
+  ],
   "browser_action": {
     "default_icon": {
       "16": "/images/icon/16w.png",
diff --git a/vendor/dropbox/dropbox-sdk.js b/vendor/dropbox/dropbox-sdk.js
