Inspiration

We live in an increasingly polarized world where we are trapped in our own opinions and only see content that conforms with our world view. Social media recommendation algorithms makes the situation worse. Newsspective hopes to help people who want to break out of such a bubble and explore many sides of the same event or an issue. It uses Gemini Nano–powered chrome APIs to search, summarize, translate, and compare news coverage of hot button issues as it is reported on a diverse array of news outlets.

What it does

Newsspective is a Chrome side-panel extension that:

  • Performs outlet-focused Google News searches (CNN, BBC, Fox News, etc.) or translates keywords into French, Spanish, Japanese, Chinese, or Russian before searching.
  • Translates Google News result cards in-page, so foreign-language coverage is readable at a glance.
  • Saves article summaries and uses the Prompt API to compare perspectives, highlighting shared facts, framing differences, tone, sentiment, and bias.

Everything runs locally, preserving privacy while delivering structured insight in seconds.

How we built it

  • Framework: Vanilla JavaScript + Chrome Side Panel API for the UI shell.
  • UI: Bootstrap 5 for responsive cards, forms, and list groups that adapt to the panel width.
  • Summaries: chrome.summarizer.summarize with length: "long" and a fallback Prompt API call to enforce 6–7 bullet points when necessary.
  • Translation: Chrome’s Translator API in both the side panel (keyword translation) and a content script that rewrites Google News result headlines/snippets.
  • Comparison: Chrome’s Prompt API (LanguageModel.prompt) with a JSON schema constraint, parsed into cards showing framing, tone, sentiment, bias, and source titles.

Challenges we ran into

  • Structured Output: Wrangling the Prompt API to return valid JSON consistently required tight schema definitions and aggressive sanitization of non-printable characters from source data.
  • UI Density: Fitting rich comparisons, saved summaries, and controls into the side panel meant embracing Bootstrap utilities and collapsible patterns to keep the layout readable.
  • Cross-Language Content: Google News result DOMs differ by locale; the content script had to account for multiple class variations while translating in-place.

Accomplishments that we're proud of

  • Delivering a fully on-device workflow for summarizing, translating, and comparing news coverage—no servers, no background data collection.
  • Building a structured comparison panel that surfaces bias and framing in a format that’s instantly digestible.
  • Crafting an extension that feels like a native side-panel companion: fast, responsive, and accessible.
  • The extension makes extensive use of all three key APIs and serves as a great example to learn from when it comes to the pure client side APIs built into chrome

What we learned

  • Chrome’s Gemini Nano APIs are powerful when combined: translation, summarization, and prompt-based reasoning create a compelling news companion without external APIs.
  • Schema-based prompts dramatically improve reliability; structured outputs are easier to render and explain than free-form text.
  • Even simple UX details—like highlighting common facts before contrasting perspectives—help readers make sense of polarized coverage quickly.

What's next

  • Topic Watchlists: Allow users to define saved queries and auto-fetch fresh perspectives each day.
  • Deeper Bias Insights: Extend the comparison schema to flag logical fallacies or missing stakeholders.
  • Export & Sharing: Provide shareable snapshots of comparison cards for classrooms, journalists, and media watchdogs.
  • Firefox & Edge Support: Port Newsspective to other Chromium-based browsers (and beyond) as their AI APIs mature.

Built With

Share this project:

Updates