Inspiration
With how polarized the modern media landscape is, it can be quite challenging to tell fact from fiction while trying to stay informed. Solutions exist for this problem - but they either require you to view your news through an external website, select specific sentences you wish to fact-check, or communicate with a chatbot to extract information. We wanted a way to see this information at a glance, right in the article; think spellcheck, but for facts and rhetoric.
What it does
Evident is a cross-browser (Chrome and Firefox, and derivatives) extension using the WebExtensions API that analyzes the article you're reading with one click and flags emotional manipulation, factual errors, bias, and more. It summarizes each point it analyzes into an overall trust score for the article, as well as giving you a profile on the news outlet and inline, sentence-level highlights with explanations of each individual issue it finds.
How we built it
The client is a fairly standard React WebExtensions side panel and a small content script that extracts the text of the article directly from your browser (thus sidestepping paywalls) and injects highlights and tooltips. Data is sent to a custom, handwritten TypeScript analysis server that kicks off several independent Claude agents (on a variety of models) to analyze the article's content on each point. The client polls the server for when analysis is completed. Finally, we made a small landing page on Vercel.
Challenges we ran into
Chrome MV3 required three separate build outputs, so we wrote a custom build.js. Matching the AI’s sentences to the live DOM was tricky; we used Jaccard similarity and the Range API. Tooltips were getting clipped by overflow: hidden on some sites, so we moved the tooltip to document.body and positioned it in JS. Additionally, we had a lot of issues with our caching system behaving in mysterious ways.
Accomplishments that we're proud of
We got inline, urgency-colored highlights with hover tooltips and click-to-open cards, plus two-way scroll between the panel and the article. The trust score combines six dimensions into one number, and we support paywalled articles by sending extracted text. First load streams from the API; repeat visits use a URL cache so results show instantly. The extension actually works; it's not just a janky hackathon project that only functions in a hyperspecific demo environment.
What we learned
We learned how to structure a Chrome MV3 extension and why each part needs a different build. We also got practice with the DOM Range API for injecting spans across text nodes and with fuzzy matching when the page text doesn’t exactly match the API response. We also learned a lot about how to use the Claude API and it's Structured Output feature, which was very handy for this project.
What's next for Evident
Next, we will have Evident automatically run in the background when you go to an article, and it shows the results when you are done. Additionally, we would like to expand it to Safari, and publish it on extension stores - the nature of the hackathon environment and the manual review process required for Safari support (through ASC) or publishing on real web stores meant this was not doable.
Built With
- anthropic-api
- bun
- elevenlabs
- gemini-api
- react
- tailwind-css
- typescript
- vite
- zod
Log in or sign up for Devpost to join the conversation.