From e8caa02e1a8028f52c40ede1da166fa7a1e94e1e Mon Sep 17 00:00:00 2001 From: DecentM Date: Sat, 3 Feb 2018 22:25:04 +0100 Subject: [PATCH] refactor: fix issues in review - refactor API connector - unquote object keys --- background/openusercss-api.js | 182 ++++++++-------- content/install-hook-openusercss.js | 309 ++++++++++++++-------------- 2 files changed, 243 insertions(+), 248 deletions(-) diff --git a/background/openusercss-api.js b/background/openusercss-api.js index f780d025..0ef98140 100644 --- a/background/openusercss-api.js +++ b/background/openusercss-api.js @@ -1,106 +1,102 @@ 'use strict'; -// begin:nanographql - Tiny graphQL client library -// License: MIT +(() => { + // begin:nanographql - Tiny graphQL client library + // Author: yoshuawuyts (https://github.com/yoshuawuyts) + // License: MIT + // Modified by DecentM to fit project standards -const getOpname = /(query|mutation) ?([\w\d-_]+)? ?\(.*?\)? \{/; -const gql = str => { - str = Array.isArray(str) ? str.join('') : str; - const name = getOpname.exec(str); - return function (variables) { - const data = {query: str}; - if (variables) data.variables = JSON.stringify(variables); - if (name && name.length) { - const operationName = name[2]; - if (operationName) data.operationName = name[2]; - } - return JSON.stringify(data); - }; -}; + const getOpname = /(query|mutation) ?([\w\d-_]+)? ?\(.*?\)? \{/; + const gql = str => { + str = Array.isArray(str) ? str.join('') : str; + const name = getOpname.exec(str); -// end:nanographql - -const api = 'https://api.openusercss.org'; -const doQuery = ({id}, queryString) => new Promise((resolve, reject) => { - const query = gql(queryString); - - fetch(api, { - 'method': 'POST', - 'headers': new Headers({ - 'Content-Type': 'application/json' - }), - 'body': query({ - id - }) - }) - .then(res => { - res.json() - .then(response => { - if (response.errors) { - reject(new Error(JSON.stringify(response.errors))); + return variables => { + const data = {query: str}; + if (variables) data.variables = JSON.stringify(variables); + if (name && name.length) { + const operationName = name[2]; + if (operationName) data.operationName = name[2]; } - resolve(response); - }); - }) - .catch(reject); -}); + return JSON.stringify(data); + }; + }; -window.API_METHODS = Object.assign(window.API_METHODS || {}, { - /** - * This function can be used to retrieve a theme object from the - * GraphQL API, set above - * - * Example: - * chrome.runtime.sendMessage({ - * 'method': 'oucThemeById', - * 'id': '5a2f819f7c57c751001b49df' - * }, console.log); - * - * @param {ID} $0.id MongoDB style ID - * @returns {Promise.<{data: object}>} The GraphQL result with the `theme` object - */ + // end:nanographql - 'oucThemeById': params => doQuery(params, ` - query($id: ID!) { - theme(id: $id) { - _id - title - description - createdAt - lastUpdate - version - screenshots - user { + const api = 'https://api.openusercss.org'; + const doQuery = ({id}, queryString) => { + const query = gql(queryString); + + return fetch(api, { + method: 'POST', + headers: new Headers({ + 'Content-Type': 'application/json' + }), + body: query({ + id + }) + }) + .then(res => res.json()); + }; + + window.API_METHODS = Object.assign(window.API_METHODS || {}, { + /** + * This function can be used to retrieve a theme object from the + * GraphQL API, set above + * + * Example: + * chrome.runtime.sendMessage({ + * 'method': 'oucThemeById', + * 'id': '5a2f819f7c57c751001b49df' + * }, console.log); + * + * @param {ID} $0.id MongoDB style ID + * @returns {Promise.<{data: object}>} The GraphQL result with the `theme` object + */ + + oucThemeById: params => doQuery(params, ` + query($id: ID!) { + theme(id: $id) { _id - displayname + title + description + createdAt + lastUpdate + version + screenshots + user { + _id + displayname + } } } - } - `), + `), - /** - * This function can be used to retrieve a user object from the - * GraphQL API, set above - * - * Example: - * chrome.runtime.sendMessage({ - * 'method': 'oucUserById', - * 'id': '5a2f0361ba666f0b00b9c827' - * }, console.log); - * - * @param {ID} $0.id MongoDB style ID - * @returns {Promise.<{data: object}>} The GraphQL result with the `user` object - */ + /** + * This function can be used to retrieve a user object from the + * GraphQL API, set above + * + * Example: + * chrome.runtime.sendMessage({ + * 'method': 'oucUserById', + * 'id': '5a2f0361ba666f0b00b9c827' + * }, console.log); + * + * @param {ID} $0.id MongoDB style ID + * @returns {Promise.<{data: object}>} The GraphQL result with the `user` object + */ - 'oucUserById': params => doQuery(params, ` - query($id: ID!) { - user(id: $id) { - _id - displayname - avatarUrl - smallAvatarUrl - bio + oucUserById: params => doQuery(params, ` + query($id: ID!) { + user(id: $id) { + _id + displayname + avatarUrl + smallAvatarUrl + bio + } } - } - `), -}); + `), + }); +})(); diff --git a/content/install-hook-openusercss.js b/content/install-hook-openusercss.js index 07da7799..4bf2ef10 100644 --- a/content/install-hook-openusercss.js +++ b/content/install-hook-openusercss.js @@ -1,159 +1,158 @@ 'use strict'; -const manifest = chrome.runtime.getManifest(); -const allowedOrigins = [ - 'https://openusercss.org', - 'https://openusercss.com' -]; - -const askHandshake = () => { - // Tell the page that we exist and that it should send the handshake - allowedOrigins.forEach(origin => { - window.postMessage({ - 'type': 'ouc-begin-handshake' - }, origin); - }); -}; - -// Listen for queries by the site and respond with a callback object -const sendInstalledCallback = styleData => { - allowedOrigins.forEach(origin => { - window.postMessage({ - 'type': 'ouc-is-installed-response', - 'style': styleData - }, origin); - }); -}; - -const attachInstalledListeners = () => { - window.addEventListener('message', event => { - if ( - event.data - && event.data.type === 'ouc-is-installed' - && allowedOrigins.includes(event.origin) - ) { - chrome.runtime.sendMessage({ - 'method': 'findUsercss', - 'name': event.data.name, - 'namespace': event.data.namespace - }, style => { - if (style) { - sendInstalledCallback({ - 'installed': true, - 'enabled': style.enabled, - 'name': event.data.name, - 'namespace': event.data.namespace - }); - } else { - sendInstalledCallback({ - 'installed': false, - 'name': event.data.name, - 'namespace': event.data.namespace - }); - } - }); - } - }); -}; - -const doHandshake = () => { - // This is a representation of features that Stylus is capable of - const implementedFeatures = [ - 'install-usercss', - 'event:install-usercss', - 'event:is-installed', - 'configure-after-install', - 'builtin-editor', - 'create-usercss', - 'edit-usercss', - 'import-moz-export', - 'export-moz-export', - 'update-manual', - 'update-auto', - 'export-json-backups', - 'import-json-backups', - 'manage-local' - ]; - const reportedFeatures = []; - - // The handshake question includes a list of required and optional features - // we match them with features we have implemented, and build a union array. - event.data.featuresList.required.forEach(feature => { - if (implementedFeatures.includes(feature)) { - reportedFeatures.push(feature); - } - }); - - event.data.featuresList.optional.forEach(feature => { - if (implementedFeatures.includes(feature)) { - reportedFeatures.push(feature); - } - }); - - // We send the handshake response, which includes the key we got, plus some - // additional metadata - allowedOrigins.forEach(origin => { - window.postMessage({ - 'type': 'ouc-handshake-response', - 'key': event.data.key, - 'extension': { - 'name': manifest.name, - 'capabilities': reportedFeatures - } - }, origin); - }); -}; - -const attachHandshakeListeners = () => { - // Wait for the handshake request, then start it - window.addEventListener('message', event => { - if ( - event.data - && event.data.type === 'ouc-handshake-question' - && allowedOrigins.includes(event.origin) - ) { - doHandshake(); - } - }); -}; - -const sendInstallCallback = data => { - // Send an install callback to the site in order to let it know - // we were able to install the theme and it may display a success message - allowedOrigins.forEach(origin => { - window.postMessage({ - 'type': 'ouc-install-callback', - 'key': data.key - }, origin); - }); -}; - -const attachInstallListeners = () => { - // Wait for an install event, then save the theme - window.addEventListener('message', event => { - if ( - event.data - && event.data.type === 'ouc-install-usercss' - && allowedOrigins.includes(event.origin) - ) { - chrome.runtime.sendMessage({ - 'method': 'saveUsercss', - 'reason': 'install', - 'name': event.data.title, - 'sourceCode': event.data.code, - }, response => { - sendInstallCallback({ - 'enabled': response.enabled, - 'key': event.data.key - }); - }); - } - }); -}; - (() => { - attachHandshakeListeners(); - attachInstallListeners(); - attachInstalledListeners(); - askHandshake(); + const manifest = chrome.runtime.getManifest(); + const allowedOrigins = [ + 'https://openusercss.org', + 'https://openusercss.com' + ]; + + const askHandshake = () => { + // Tell the page that we exist and that it should send the handshake + allowedOrigins.forEach(origin => { + window.postMessage({ + type: 'ouc-begin-handshake' + }, origin); + }); + }; + + // Listen for queries by the site and respond with a callback object + const sendInstalledCallback = styleData => { + allowedOrigins.forEach(origin => { + if (origin === location.origin) { + window.postMessage({ + type: 'ouc-is-installed-response', + style: styleData + }, origin); + } + }); + }; + + const attachInstalledListeners = () => { + window.addEventListener('message', event => { + if ( + event.data + && event.data.type === 'ouc-is-installed' + && allowedOrigins.includes(event.origin) + ) { + chrome.runtime.sendMessage({ + method: 'findUsercss', + name: event.data.name, + namespace: event.data.namespace + }, style => { + const data = {event}; + const callbackObject = { + installed: Boolean(style), + enabled: style.enabled, + name: data.name, + namespace: data.namespace + }; + + sendInstalledCallback(callbackObject); + }); + } + }); + }; + + const doHandshake = () => { + // This is a representation of features that Stylus is capable of + const implementedFeatures = [ + 'install-usercss', + 'event:install-usercss', + 'event:is-installed', + 'configure-after-install', + 'builtin-editor', + 'create-usercss', + 'edit-usercss', + 'import-moz-export', + 'export-moz-export', + 'update-manual', + 'update-auto', + 'export-json-backups', + 'import-json-backups', + 'manage-local' + ]; + const reportedFeatures = []; + + // The handshake question includes a list of required and optional features + // we match them with features we have implemented, and build a union array. + event.data.featuresList.required.forEach(feature => { + if (implementedFeatures.includes(feature)) { + reportedFeatures.push(feature); + } + }); + + event.data.featuresList.optional.forEach(feature => { + if (implementedFeatures.includes(feature)) { + reportedFeatures.push(feature); + } + }); + + // We send the handshake response, which includes the key we got, plus some + // additional metadata + allowedOrigins.forEach(origin => { + window.postMessage({ + type: 'ouc-handshake-response', + key: event.data.key, + extension: { + name: manifest.name, + capabilities: reportedFeatures + } + }, origin); + }); + }; + + const attachHandshakeListeners = () => { + // Wait for the handshake request, then start it + window.addEventListener('message', event => { + if ( + event.data + && event.data.type === 'ouc-handshake-question' + && allowedOrigins.includes(event.origin) + ) { + doHandshake(); + } + }); + }; + + const sendInstallCallback = data => { + // Send an install callback to the site in order to let it know + // we were able to install the theme and it may display a success message + allowedOrigins.forEach(origin => { + window.postMessage({ + type: 'ouc-install-callback', + key: data.key + }, origin); + }); + }; + + const attachInstallListeners = () => { + // Wait for an install event, then save the theme + window.addEventListener('message', event => { + if ( + event.data + && event.data.type === 'ouc-install-usercss' + && allowedOrigins.includes(event.origin) + ) { + chrome.runtime.sendMessage({ + method: 'saveUsercss', + reason: 'install', + name: event.data.title, + sourceCode: event.data.code, + }, response => { + sendInstallCallback({ + enabled: response.enabled, + key: event.data.key + }); + }); + } + }); + }; + + (() => { + attachHandshakeListeners(); + attachInstallListeners(); + attachInstalledListeners(); + askHandshake(); + })(); })();