README
Tanager Graphql
Tanager is a library that allows you to build up a local graphql that is accessible via messaging. The is currently setup to use browser messages between the background process of a web extension and its client scripts.
npm install --save tanager-graphql
# or
yarn add tanager-graphql
Build out an API
The TanagerApi
class is a class that allows you to create an executable graphql schema. It is modeled to look just like the ApolloServer
class. The only required properties in the options are typeDefs
and resolvers
.
import { TanagerApi } from 'tanager-graphql'
// Define your schema
const typeDefs = `
input PermissionsInput {
permissions: [String!]
}
type Browser {
permissions($input: PermissionsInput)
}
type Query {
browser: Browser
}
`;
// Defined resolvers
const resolvers = {
Browser: (parent, { input }) => {
return browser.premissions.contains(input);
}
};
// Create the executable schema
const api = new TanagerApi({
typeDefs,
resolver,
});
Attaching to messaging
If you do not have any existing messages you may use the attachMessages
option to automatically attach to the runtume messages. If you have existing messages you will want to setup up the manual handler to ensure you are able to resolve async resolvers.
import { TanagerMessageKey } from 'tanager-graphql';
browser.runtime.onMessage.addListener((message) => {
if (message.type === TanagerMessageKey.Generic) {
return api.onMessage(message);
}
}, []);
This also has the ability to work with extenal messages but you should use the other message handler to ensure permissions between external sources can be managed differntly.
browser.runtime.onExternalMessage.addListener((message) => {
if (message.type === TanagerMessageKey.Generic) {
return api.onExternalMessage(message);
}
}, []);
Query from content script
This is the main reason for this library, it makes it super easy to query large amounts of data from the background script without sending multiple messages.
import { queryApi } from 'tanager-graphql'
const GetBrowserPermission = `
query getBrowserPermission($input: PermissionsInput) {
browser {
permissions(input: $input)
}
}
`
(async function main() {
const resp = await queryApi(GetBrowserPermission, {
input: { permissions: ['geolocation'] }
})
if (resp.data?.browser?.permissions) {
// Do stuff with permissions
}
})()