Building a Chrome Extension to Auto-Save Gemini Chat Logs using AI (Part 1)

This article was originally published on e-shikumi-labo.

Hello, I'm Shin from e-Shikumi-Labo. How do you all manage your conversations with Gemini? When you manage to extract a useful response from the AI, have you ever thought, "I want to keep this somewhere"? It all started from a simple, practical desire in my daily work: "I want to automatically save useful conversations from Gemini to a spreadsheet before they fade away."

So, borrowing the power of Generative AI (Gemini), I tried making my own personal Chrome extension. Over this four-part series, I will write about "systematized thinking"-the process of utilizing AI to build tools and independently maintaining them. In Part 1, I'll share the developmental dialogue process: "How did I instruct the AI, what information did I provide, and how did we complete the prototype?"

1. A Prompt That Says: "Don't Guess, Ask for the Information You Need"

As the very first step in development, I threw this prompt directly at Gemini itself.

"I want to save Gemini's responses to a spreadsheet using a Chrome extension. Tell me how to build it without using your imagination. If you need any specific information, please point it out."

The key here lies in two constraints: "without using your imagination" and "point out if you need information."

When you try to build a web data extraction tool using AI, the AI often tends to "guess" the internal structure of the webpage (like HTML tags and class names) on its own and write the code. And even when you test this supposedly completed code, you fall into the trap of it not working because it doesn't align with the actual screen structure. To avoid this trap, I explicitly communicated, "Don't guess on your own. If there's missing information, I want you to demand it from the human side."

2. A Game of Catch with AI Using DevTools

When I threw this prompt, the AI returned the following response:

AI: "Understood. To create code that works reliably while eliminating guesswork, please retrieve and paste the following two HTML elements (code snippets) from your current Gemini screen.

• The element surrounding the user's (your) prompt text.
• The element surrounding Gemini's response text."

The AI specifically requested the "materials necessary to write working code."

From here on, it's human work. I opened Gemini in the Chrome browser, pressed the F12 key (or right-clicked > "Inspect"), and launched the Developer Tools (DevTools). I selected the HTML code for my prompt area and Gemini's response area, copied it, and pasted it into the chat window with the AI.

[Human] Here is the HTML for the prompt area:

<div class="query-text">...</div>

Here is the HTML for the response area:

<div class="markdown-main-panel">...</div>

3. Completing the Prototype and Reflecting on My Past Self

Receiving this information, the AI wrote the data extraction logic (JavaScript) that precisely targeted those elements, along with the program to send that data to a spreadsheet. When I prepared the files as instructed, loaded the extension into Chrome, and conversed with Gemini, the data I typed on the screen was automatically written to the spreadsheet in the