Vibe Coding: a Modern UserScript Example

Repetitive tasks are the "paper cuts" of the digital age. For me, the culprit was Google Contacts. I needed to copy Name, Email, Phone, and Address for several people, and I didn't want to copy and paste four separate times for every person. I wanted a "Copy Essentials" button that did it all in one click.

What is "Vibe Coding"?
It’s a shift in how we build. Instead of struggling with syntax, you act as the "Product Manager" or "Director." You describe the vibe—the intended behavior and feel—and use AI to handle the boilerplate. But as I learned, getting the "vibe" right in a complex app requires a bit of detective work.

The Story of the "Ghost" in the Machine

I started this project using a standard AI model. In just three attempts, I had a script that worked... if I refreshed the page every time. Google Contacts is a "Single Page Application" (SPA). When you click from one person to another, the page doesn't actually reload; it just swaps out the data invisibly. The standard script got "stuck" on the first person I clicked and couldn't see the new one.

The Debugging "Aha!" Moment

To fix this, I moved to a Premium AI service (Gemini 1.5 Pro). We implemented a "Debug Level" that printed the script's heartbeat to the console. That’s when we saw it: the script was still seeing the first contact's name in the background code! Google was hiding the old contact rather than deleting it. We had to build "Ghost Buster" logic to strictly ignore hidden elements and only "see" what was actually visible on the screen.

The Effort Gap: The first 80% of the feature took 5 minutes. The last 20%—making it robust enough to survive SPA navigation and "ghost" elements—required the most sophisticated reasoning and took the most time. This is where Premium AI truly shines.

The Final Result

The finished version is high-contrast, easy to read, and includes "Educational" comments so anyone can see how it works under the hood.

Install or view the Script: Copy Google Contact on GreasyFork

Follow the Journey (Archive Links)

I’ve archived these conversations so you can follow the logic from the very first "failed" attempt to the final working tool.

Step 1: Step 1: The Initial Prototype (Standard AI)
The first attempts that struggled with navigation but proved the concept.
View Archived Log #1

Step 2: The Robust Refinement (Premium AI)
Solving the "Ghosting" problem and adding high-contrast visual feedback.
View Archived Log #2

Technical Lessons Learned

• Visibility Matters: In modern apps, just because an element exists in the code doesn't mean the user can see it. Always check offsetParent.
• The Heartbeat: Building a "Debug Level" into your scripts makes it infinitely easier to fix things when the website updates its layout.
• Vibe vs. Logic: AI is great at the "vibe," but the human still needs to be the detective when the "vibe" meets a complex reality.