DevLog: Building the Da Phaq Chrome Extension
Companion Post to Vibe Software Production
This is my DevLog about building Da Phaq? with Cursor. The project post is here.
Summary:
Over the course of a few days, I built and launched a Chrome extension called "Da Phaq?"—a tool that uses OpenAI’s GPT-4o-mini model to explain confusing web content in plain English. The project spanned building the core functionality of the extension, iterating on UI/UX, resolving complex permission and compliance issues with the Chrome Web Store, and creating a polished landing page. The process revealed how well "vibe coding" with AI Agents perform for building real-world software. I also explored how to re-architect for a SaaS version of the tool.
Project: Da Phaq? Chrome Extension
Dates: 2025-03-21 to 2025-03-28
Chrome Extension Development: From Concept to Functional Build
I started by designing the initial extension to allow users to select any text on a webpage and get a simplified explanation using OpenAI's GPT models. The architecture relied on content scripts to capture selections, a popup interface for interaction, and background scripts to manage API calls and state.
Key features I implemented:
Text selection detection across web pages
A popup interface with radio buttons for explanation modes ("simple" and "explain by analogy")
Support for persistent API key storage via Chrome's local storage
Copy-to-clipboard functionality
Max token control and UI for truncated responses
I ran into several bugs, including:
Inconsistent detection of selected text
Truncation of long responses
The popup not fitting within the window bounds
Persistent issues with PDFs and pages that used shadow DOMs
Each of these required debugging and refining both JavaScript logic and CSS for better positioning and layout control.
PDFs and Image Handling
I couldn't get text selection from PDFs or image selection to work and after exploring several fixes and rewrites, I abandoned the features and just focused on plain webpage text.
Chrome Extension Store Compliance and Rejection
Much of the late-stage work involved compliance with Google's Chrome Web Store policies:
I wrote and rewrote justifications for permissions like "tabs" and "scripting"
I reviewed Google’s policies and FAQs to determine what counts as “remote code”
I carefully filled out the developer dashboard with privacy disclosures, licensing (MIT), and a privacy policy that aligns with Google’s Limited Use requirements
Despite these efforts, the extension was initially rejected for requesting too many permissions. I re-evaluated the manifest and resubmitted. I had strong feelings here—Google’s vague definitions made things difficult, and Cursor's AI agent (which mainly used Claude 3.7 Sonnet) made bad recommendations. This delayed launch by 6 days.
GitHub Integration and Project Renaming
I renamed the project from "wtf" to "daphaq", updated the remote repository, and resolved Git issues with renaming the local project folder. I also added a README, MIT license, and .gitignore to formalize the repo.
Project: daphaq-landing
Dates: 2025-03-24 to 2025-04-02
Building the Landing Page and Marketing Experience
Once the extension was operational, I shifted to building a landing page that would serve as the public face of Da Phaq?.
Highlights:
Designed a React-based landing page using components like Hero, Features, CallToAction, and VideoEmbed
Embedded promotional and instructional videos hosted on YouTube
Spent considerable effort ensuring the YouTube frame didn't show other videos after playing mine
Fought with layout and spacing issues—ensuring consistent vertical spacing and responsive placement for mobile views
Added legal pages (Privacy Policy, Terms, Accessibility, etc.) and configured routing in AWS Amplify
Integrated Google Analytics on every page
I was extremely particular about the UI/UX:
I demanded precise placement and spacing
I rejected several modal implementations that didn’t behave consistently when scrolling
I iterated on the video display layout to make it mobile-friendly and visually balanced
Content and SEO
I asked the AI to write ad copy and revise it multiple times, focusing on clearly communicating the pain point: reading something online and not understanding it. The final narrative was clean and focused on the core value Da Phaq? provides.
I also reviewed every piece of text on the site for grammar and clarity, including legal disclaimers, and made sure all hyperlinks worked as intended.
Miscellaneous
Replaced the navbar logo with a custom image and added subtle styling and animation
Added a floating tagline image at the bottom of the page
Adjusted the README to reflect that this is a landing page and not an open-source project
Deployment and Updates
After the Chrome extension was approved, I updated all “Add to Chrome” buttons with the official store link. I also ensured that the landing page reflected that the extension was now live and ready for download.
SaaS Planning and Monetization Strategy
Dates: 2025-03-24 to 2025-03-25
In parallel with development, I explored how to turn Da Phaq? into a SaaS product. I identified two user models:
Bring Your Own Key (BYOK)
Subscription-based access where the software would manage a pool of OpenAI API keys
Key considerations:
OpenAI pricing for gpt-4o-mini
Stripe and Google’s commission rates
Backend architecture for managing API usage and user subscriptions
Metrics for tracking subscriptions, use, and operational costs.
I explored a $0.99/month price but determined this would be too low to cover costs at a good margin. At this point I decided to just publish the BYOK model and add a paid version if there’s demand.
Written with Cursor Journal