Part 1: How Far Can You Get by 'Leaving It Completely to AI'? Building a Chrome Extension to Auto-Save Gemini Chat Logs

Shin from e-Shikumi-Labo built a Chrome extension that automatically saves Gemini chat logs to a spreadsheet, using Gemini itself to write the code. By instructing the AI to avoid guessing and to request specific HTML elements, the developer completed a working prototype, highlighting a shift where humans oversee system structure while AI handles coding.

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?" 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." 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 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 background. When I confirmed it was working, I felt a deep sense of emotion. Actually, in the past, I had a period where I was painstakingly and clumsily trying to build a tool to scrape data from a domestic flea market site, checking the HTML elements of complex screens one by one. As someone who knows the difficulty of web data extraction, seeing the sheer skill with which the AI analyzed the HTML elements I provided, assembled accurate code, and made it work made me truly feel the evolution of our times. Thinking about my past struggles, the difference in development speed is obvious. Here, I gained one important "realization." In today's age, humans don't need to memorize the JavaScript syntax for Chrome extensions. You can leave the actual coding to the AI without any issues. The reason I was still able to build the tool was because I understood the overall system structure of "Input extract from screen " - "Process filter duplicates " - "Output send to GAS ", and I knew how to pass accurate, on-the-ground information HTML elements to the AI. I realized that the real initiative in tool-building lies not in knowing the grammar, but in "grasping the overall mechanism and how to control the AI." "Chat Saver for Gemini" is the completed version, built upon this prototype by layering on error handling and duplicate prevention processing. The overall structure is simple: it involves "creating a receiving endpoint GAS on the spreadsheet side, and sending data to it from the Chrome extension." For those who think, "Rather than building it from scratch myself, I just want to use it in my practical work quickly," or "I want the complete set of the latest Manifest V3 compatible code and setup instructions," I have placed the finished package that I actually use on Gumroad. 🔗 Chat Saver for Gemini View the complete code package on Gumroad https://www.google.com/search?q=https://maru0122.gumroad.com/l/chatsaverforgemini ⚠️ Things You Should Know as a Prerequisite Since the counterpart is Google Gemini , there is a possibility that it will stop working due to UI specification changes. It is not a product with a guarantee of permanent operation; please use it simply as a "tool to experience the mechanism and make practical work more convenient." To prevent misunderstandings after introduction, I am also clearly stating the technical limitations prerequisites . Next Time Preview We successfully achieved automatic saving to a spreadsheet. However, when I actually started using it heavily in my work, I ran into a new challenge. "When long texts or source code go into a single cell in a spreadsheet, it's hard to read and difficult to reuse." Next time, I'll cover the mechanism of not only saving to a spreadsheet but also automatically generating "Markdown .md files" directly to Google Drive simultaneously, allowing you to comfortably build a knowledge base in your local note-taking app like Obsidian . We successfully achieved automatic saving to a spreadsheet. However, when I actually started using it heavily in my work, I ran into a new challenge. "When long texts or source code go into a single cell in a spreadsheet, it's hard to read and difficult to reuse." Next time, I'll cover the mechanism of not only saving to a spreadsheet but also automatically generating "Markdown .md files" directly to Google Drive simultaneously, allowing you to comfortably build a knowledge base in your local note-taking app like Obsidian .