Skip to content
All projects

Chrome extension 2026

Hasura Query Saver

Never lose a GraphiQL query again.

Role
Solo — extension architecture, UI and release pipeline
Year
2026
Stack
  • Chrome MV3
  • React
  • Vite
  • Tailwind CSS
  • IndexedDB
  • GitHub Actions
Live previewHasura Query Saver
1-click
save and apply
0
servers — everything stays on-device
2
JS worlds bridged
Auto
versioned releases from git tags

[A]Overview

A Chrome extension for Hasura's public GraphiQL console that saves queries, variables and headers locally, and puts any of them back into the editor with one click.

[B]The problem

Hasura's public GraphiQL console forgets your work between sessions. Queries, variables and the headers that carry roles and admin secrets all vanish, and rebuilding them wastes time every day.

[C]Approach

  1. 01

    Reach GraphiQL's CodeMirror editors from a MAIN-world content script, relayed through an isolated-world script that talks to the extension.

  2. 02

    Live in Chrome's side panel, not a popup, so drafts survive clicking into the page.

  3. 03

    Treat headers as secrets: masked in the UI and blanked on export unless you explicitly opt in.

[D]Highlights

  • H-01

    Apply never destroys work

    Before overwriting the editor it snapshots what's there, and the confirmation offers a Restore button.

  • H-02

    Safe sharing

    Export to JSON for teammates with header values blanked by default; imports skip duplicates in a single transaction.

  • H-03

    Survives extension reloads

    A re-injected page script replaces its previous listener, so headers are never written twice after an update.

  • H-04

    Hands-off releases

    Pushing to the release branch computes the next version from git tags, builds, and uploads a Chrome Web Store draft.

[E]Under the hood

Hasura Query Saver / explorer
  • content-main.jsMAIN world — reads/writes CodeMirror and the headers table
  • content-isolated.jsrelays messages between page and extension
  • background.jsopens the side panel from the toolbar
  • App.jsxside-panel UI, IndexedDB storage

[NEXT] Next project

lazystash

Browse, preview and pop git stashes in a terminal UI.