Apollo Sandbox - Chrome Extension

Intro

Add a private Chrome Devtools panel for querying any GraphQL endpoint.

Features

• Chrome Extension Manifest Version 3
• React 18
• TypeScript
• Jest
• React Testing Library
• Vite
• SASS
• ESLint
• Prettier

Installation

1. Clone the repo
2. Change name and description in package.json - The manifest will pull in those values and use them for the Chrome Extention
3. Run yarn or npm i
4. Run yarn dev or npm run dev
5. Load the xxtension in Chrome
   1. Launch chrome://extensions
   2. Enable Developer Mode
   3. Click Load unpacked extension
   4. Select the dist folder in this project (after dev or build)
6. If you want to build in production, run yarn build or npm run build.

Open Devtools, select the Apollo Sandbox panel, and enter the graphql endpoint you'd like to query.

Contentful Endpoint

https://graphql.contentful.com/content/v1/spaces/{SPACE}
# or for an environment
https://graphql.contentful.com/content/v1/spaces/{SPACE}/environments/{ENVIRONMENT}

Add these header keys:

Header Key	Value
Authorization	Bearer {{CONTENTFUL_TOKEN}}

After saving, open Settings ⚙️

Add Environment Variables:

{
  "CONTENTFUL_TOKEN": // YOUR_CONTENT_DELIVERY_GRAPHQL_TOKEN
}

Shopify Endpoint

https://{store_name}.myshopify.com/api/2022-07/graphql.json

Add these header keys:

Header Key	Value
X-Shopify-Storefront-Access-Token	{{STOREFRONT_TOKEN}}

After saving, open Settings ⚙️

Add Environment Variables:

{
  "STOREFRONT_TOKEN": // YOUR_STOREFRONT_TOKEN
}

Verify the variables are activated in the Headers tab underneath the Query section

Notes

To change the name of the panel, open pages/devtools/index.ts and replace "Apollo Sandbox" with the new name:

try {
  chrome.devtools.panels.create(
    "Apollo Sandbox",
    "icon-34.png",
    "src/pages/panel/index.html"
  );
} catch (e) {
  console.error(e);
}