Global Citizen Kit (GCK)

Bringing People Together leveraging Chrome Built-in AI APIs

Comment

Inspiration

To leverage Chrome's built-in AI APIs to create an opportunity to bring people from diverse backgrounds/regions/countries together. The project was inspired by the idea of giving users a quick, contextual culture snapshot and on-demand content generation without leaving their browsing flow.

What it does

  • Generates short cultural briefs for random countries (culture capsule, global voice, essential greeting).
  • Provides translation utilities and a side-by-side original + translated view.
  • Summarizes selected text from the active tab or the sidepanel.
  • Offers a Writer modal to generate briefs, poems, or travel lists and to rewrite/copy output.
  • Includes toolbar helpers: Summarizer, Translator, Rewriter, Proofreader, Language Detector.

How we built it

  • Frontend: sidepanel.html + sidepanel.js: UI and all client-side logic. The writer modal is created dynamically by JavaScript.
  • Browser APIs: Ai Built-in APIs, chrome.tabs, chrome.scripting, chrome.runtime
  • Development on Windows with manual extension reload via chrome://extensions during iteration.

Challenges we ran into

  • Browser API availability: some features reference experimental or platform-specific AI helpers; these can vary across Chrome/Edge/Canary and require feature flags or fallbacks.
  • Parsing free-form AI output: responses can vary in structure, so extraction uses flexible regexes and tolerant rendering logic.
  • Modal vs in-panel UI duplication: earlier versions included both an inline writer block and a dynamic modal , consolidation was needed to avoid duplicate code and UI conflicts.

Accomplishments that we're proud of

  • Able to build a good workflow as needed for the project theme.
  • Delivered a compact, polished UI with theme variables and a matching modal style.
  • Implemented robust parsing and graceful error handling for missing APIs.
  • Built a self-contained writer modal that feels native to the sidepanel and preserves generated content copy/rewrites.
  • Demonstrated an end-to-end user flow (discover → translate → summarize → generate) in a single extension.

What we learned

  • Progressive enhancement is essential: design for graceful degradation when browser features are missing.
  • Keep UI components isolated: dynamically injected modals reduce duplication and prevent layout issues in constrained sidepanels.
  • Small UX touches (accent colors, animation, clear status messages) significantly improve perceived polish.

What's next for Global Citizen Kit (GCK)

  • Pack more features; make more languages available as they are made available on the platform.
  • Tech finess: Move dynamic modal styles into a dedicated CSS file and further centralize theme variables.
  • Add accessibility improvements (keyboard focus trap for modal, ARIA attributes).
  • Add lightweight unit tests for AI output parsing and smoke tests for the modal flow.

Built With

Share this project:

Updates