Build Anything with Perplexity, Here’s How
Based on David Ondrej's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.
Use Perplexity to generate the initial Chrome extension files (manifest.json, popup HTML, JavaScript, CSS) and even the required icon assets, then iterate from there.
Briefing
A beginner-friendly workflow for building a Chrome extension is the headline: Perplexity is used to generate the extension’s code (manifest, popup UI, JavaScript behavior, and CSS), then iterative fixes are made—ultimately switching to GPT-4 for debugging—to create a “focus” tool that blocks distracting sites and forces a choice between continuing or redirecting to a task list. The practical payoff is immediate: after multiple rounds of troubleshooting, the extension can intercept visits to Twitter/X and present a full-screen overlay with two options, effectively turning web browsing into a controlled decision point.
The build starts with Perplexity’s ability to search the web and also generate code from that context. The creator contrasts Perplexity with ChatGPT by pointing out that Perplexity pulls from many more sources (e.g., “20 different websites” versus fewer sources in another tool), and highlights the ability to choose models—specifically Claude 3 Opus—for code generation, then switch to GPT-4 for debugging. That model-switching becomes a key tactic when the extension doesn’t behave as expected.
The extension concept is straightforward: when a user tries to visit a distracting domain (initially Twitter, later updated for x.com as well), a UI appears offering two buttons—one to redirect to a task list URL (the example uses Todoist) and another to continue to the original site. Perplexity also helps generate multiple UI design options (popup, sidebar, full-page interstitial), but the final implementation converges on a full-screen overlay that prevents the site from loading normally.
From there, the workflow becomes a step-by-step coding exercise without manual coding knowledge. The creator creates a project folder in VS Code, adds a manifest.json, then generates popup HTML, JavaScript, and CSS. Icons are also generated with Perplexity and then resized into the required PNG dimensions for Chrome’s extension manifest. Testing follows Chrome’s standard “developer mode” and “load unpacked” process, with the extension initially failing to trigger the overlay automatically.
Troubleshooting is the turning point. The extension works only after clicking the extension icon, which reveals an injection/overlay timing problem—content scripts weren’t producing the intended full-screen block during page load. The fix involves restructuring the extension so the overlay is injected as a content script and displayed immediately when visiting twitter.com or x.com. After that change, the overlay finally blocks the distraction flow: the user can still scroll in the background, but the full-screen UI appears with the choice buttons.
The last polish is visual: the overlay background is changed from a dimmed opacity effect to a fully black screen, making the distraction harder to ignore. The result is a working focus extension built in under an hour despite starting as a “complete beginner,” reinforced by the broader message that AI tools can handle the coding and debugging loop—especially when switching models for different tasks (code generation vs. debugging).
Cornell Notes
Perplexity can generate the full codebase for a Chrome “focus” extension—manifest.json, popup HTML, JavaScript, CSS, and even extension icons—so a non-programmer can build something functional. The extension’s job is to intercept visits to distracting sites (Twitter/X) and show a full-screen overlay with two actions: redirect to a task list or allow continuing to the site. Early versions may only work after clicking the extension icon, which points to content-script injection/timing issues. Switching to GPT-4 for debugging helps correct the manifest/content-script setup so the overlay appears automatically on twitter.com and x.com. The final refinement makes the overlay background fully black for stronger focus.
What is the core behavior the extension implements when a user visits a distracting site?
Why does the build require multiple iterations instead of working on the first try?
How do model choices affect the workflow (Perplexity vs GPT-4)?
What role does the Chrome extension manifest play in making the overlay appear correctly?
How does the extension ensure it targets only specific sites (Twitter/X) rather than everything?
What final UI change improves the “focus” effect?
Review Questions
- What specific Chrome extension mechanism must be corrected when the overlay only appears after clicking the extension icon?
- How would you modify the URL-matching logic to support an additional distracting domain beyond twitter.com and x.com?
- Why might redirecting the current tab (instead of opening a new tab) be important for a productivity-focused extension?
Key Points
- 1
Use Perplexity to generate the initial Chrome extension files (manifest.json, popup HTML, JavaScript, CSS) and even the required icon assets, then iterate from there.
- 2
Design the extension around a simple decision UI: redirect to a task list or allow continuing to the distracting site.
- 3
Test via Chrome’s developer mode and “load unpacked,” then validate behavior on the exact target domains (twitter.com and x.com).
- 4
If the overlay appears only after clicking the extension icon, treat it as an injection/timing problem and adjust the manifest/content-script setup.
- 5
Switch to GPT-4 for debugging when extension behavior doesn’t match expectations, especially for content-script overlay rendering.
- 6
Scope the extension with URL checks so it only triggers on the intended distracting sites.
- 7
Polish the overlay for usability—e.g., use a fully black background to reduce visibility of distracting content.