refactor: fix issues in review
- refactor API connector - unquote object keys
This commit is contained in:
DecentM
parent
aa7af11dd4
commit
e8caa02e1a
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
`),
|
||||
});
|
||||
`),
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
})();
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user