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';
|
'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 getOpname = /(query|mutation) ?([\w\d-_]+)? ?\(.*?\)? \{/;
|
||||||
const gql = str => {
|
const gql = str => {
|
||||||
str = Array.isArray(str) ? str.join('') : str;
|
str = Array.isArray(str) ? str.join('') : str;
|
||||||
const name = getOpname.exec(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);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// end:nanographql
|
return variables => {
|
||||||
|
const data = {query: str};
|
||||||
const api = 'https://api.openusercss.org';
|
if (variables) data.variables = JSON.stringify(variables);
|
||||||
const doQuery = ({id}, queryString) => new Promise((resolve, reject) => {
|
if (name && name.length) {
|
||||||
const query = gql(queryString);
|
const operationName = name[2];
|
||||||
|
if (operationName) data.operationName = name[2];
|
||||||
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)));
|
|
||||||
}
|
}
|
||||||
resolve(response);
|
return JSON.stringify(data);
|
||||||
});
|
};
|
||||||
})
|
};
|
||||||
.catch(reject);
|
|
||||||
});
|
|
||||||
|
|
||||||
window.API_METHODS = Object.assign(window.API_METHODS || {}, {
|
// end:nanographql
|
||||||
/**
|
|
||||||
* 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, `
|
const api = 'https://api.openusercss.org';
|
||||||
query($id: ID!) {
|
const doQuery = ({id}, queryString) => {
|
||||||
theme(id: $id) {
|
const query = gql(queryString);
|
||||||
_id
|
|
||||||
title
|
return fetch(api, {
|
||||||
description
|
method: 'POST',
|
||||||
createdAt
|
headers: new Headers({
|
||||||
lastUpdate
|
'Content-Type': 'application/json'
|
||||||
version
|
}),
|
||||||
screenshots
|
body: query({
|
||||||
user {
|
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
|
_id
|
||||||
displayname
|
title
|
||||||
|
description
|
||||||
|
createdAt
|
||||||
|
lastUpdate
|
||||||
|
version
|
||||||
|
screenshots
|
||||||
|
user {
|
||||||
|
_id
|
||||||
|
displayname
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
`),
|
||||||
`),
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This function can be used to retrieve a user object from the
|
* This function can be used to retrieve a user object from the
|
||||||
* GraphQL API, set above
|
* GraphQL API, set above
|
||||||
*
|
*
|
||||||
* Example:
|
* Example:
|
||||||
* chrome.runtime.sendMessage({
|
* chrome.runtime.sendMessage({
|
||||||
* 'method': 'oucUserById',
|
* 'method': 'oucUserById',
|
||||||
* 'id': '5a2f0361ba666f0b00b9c827'
|
* 'id': '5a2f0361ba666f0b00b9c827'
|
||||||
* }, console.log);
|
* }, console.log);
|
||||||
*
|
*
|
||||||
* @param {ID} $0.id MongoDB style ID
|
* @param {ID} $0.id MongoDB style ID
|
||||||
* @returns {Promise.<{data: object}>} The GraphQL result with the `user` object
|
* @returns {Promise.<{data: object}>} The GraphQL result with the `user` object
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'oucUserById': params => doQuery(params, `
|
oucUserById: params => doQuery(params, `
|
||||||
query($id: ID!) {
|
query($id: ID!) {
|
||||||
user(id: $id) {
|
user(id: $id) {
|
||||||
_id
|
_id
|
||||||
displayname
|
displayname
|
||||||
avatarUrl
|
avatarUrl
|
||||||
smallAvatarUrl
|
smallAvatarUrl
|
||||||
bio
|
bio
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
`),
|
||||||
`),
|
});
|
||||||
});
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,159 +1,158 @@
|
||||||
'use strict';
|
'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();
|
const manifest = chrome.runtime.getManifest();
|
||||||
attachInstallListeners();
|
const allowedOrigins = [
|
||||||
attachInstalledListeners();
|
'https://openusercss.org',
|
||||||
askHandshake();
|
'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