Add a private Chrome Devtools panel for querying any GraphQL endpoint.
- Chrome Extension Manifest Version 3
- React 18
- TypeScript
- Jest
- React Testing Library
- Vite
- SASS
- ESLint
- Prettier
- Clone the repo
- Change
name
anddescription
in package.json - The manifest will pull in those values and use them for the Chrome Extention - Run
yarn
ornpm i
- Run
yarn dev
ornpm run dev
- Load the xxtension in Chrome
- Launch chrome://extensions
- Enable Developer Mode
- Click
Load unpacked extension
- Select the
dist
folder in this project (after dev or build)
- If you want to build in production, run
yarn build
ornpm run build
.
Open Devtools, select the Apollo Sandbox panel, and enter the graphql endpoint you'd like to query.
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
}
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
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);
}