DEV Community: e-shikumi-labo

Part 4: When It Breaks, Just Fix the 'Raw Parts'. The Self-Reliance to Maintain Tools Yourself by Commanding AI

e-shikumi-labo — Sat, 01 Aug 2026 00:19:59 +0000

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

Hello, I'm Shin from e-Shikumi-Labo.

This is the final installment (Part 4) of "Systematized Thinking," where we use AI to build our own tools and independently maintain them.

So far, we have discussed creating a prototype that automatically saves Gemini chat logs, converting them to Markdown for Obsidian integration, and elevating it to a safe, fully automated system.

In this final installment, we will cover the "countermeasures for downtime due to screen specification changes," an unavoidable issue when operating tools that handle web data, and the core of the "self-reliance" humans should possess in the AI era.

1. The Web Data Extraction Compromise: "You Can't Extract What Isn't on the Screen"

During development, there was a time when I thought, "I also want to record the exact date and time (timestamp) when the chat was sent."

However, no matter how much I analyzed Gemini's screen structure, the exact timestamp of each utterance did not exist in the HTML.

The fundamental rule of web data extraction is: "You cannot extract data that does not exist on the browser screen."

As long as you are extracting data from the screen (DOM) rather than via an API, forcing the extraction of something that isn't there will require complex guesswork processes and will instead become a cause of trouble.

Understanding this "technical limit," gracefully giving up on what cannot be done, and judging to maintain simplicity is also an important element of tool building.

2. Specification Changes Are Not Defects, But "Fate"

As long as you deal with tools that extract data from other people's websites, the time will inevitably come when the tool suddenly stops working one day due to design changes or updates on Google's side.

"It was working fine until yesterday, but suddenly it stopped saving."

This is not a defect in the tool, but an unavoidable "fate" as long as you depend on someone else's platform.

The important thing is not to seek an "absolutely unbreakable, perfect tool." It is to accept the premise that it will break, grasp "where and how to fix it when it breaks," and create a state where you can quickly restore it yourself.

3. Isolated Design with "parser.js" and Repair Using AI

In the "Chat Saver for Gemini" created this time, the process of reading data from the screen (DOM parsing) is separated into an independent file called parser.js.

By separating the communication processing (content.js) and the parsing processing (parser.js) like this, even if Gemini's screen design changes, you only need to modify designated places (like CSS selectors) inside parser.js.

Recovery Steps When UI Updates Break Things

If it stops working due to a screen change, the tasks humans need to perform are as follows:

Check the new elements with DevTools (Inspect Tool)
Open Gemini in Chrome, press the F12 key (or right-click > "Inspect"), and check and copy the new HTML structure of the prompt area and response area.
Request the AI to fix it
There is no need to rewrite the code directly yourself. Pass the copied latest HTML elements and the current parser.js you have to the AI and instruct it to make corrections.

Prompt Example:

"The parser.js stopped working due to a Gemini UI update. I have attached the current parser.js code, along with the latest HTML elements for the prompt area and response area. Based on this information, please modify the selector parts."

Even if you don't decipher the code yourself, simply presenting the parts that changed (input information) will prompt the AI to spit out the corrected code in seconds.

4. [Conclusion] What It Means to Be "Self-Reliant" by Controlling AI

What I wanted to convey throughout these four parts was not just how to build a tool.

Part 1: Even if you don't perfectly understand code syntax, you can build a tool if you leave it to AI.
Part 2: Expanding the mechanism to fit your own business challenges (like readability issues).
Part 3: Noticing the risks (like account bans) in the code the AI produced and pulling the reins.
Part 4: Preparing a structure on the premise that it will break, and maintaining it yourself using AI.

There is no need to memorize JavaScript syntax or detailed coding methods.

What humans really need to understand is the map of the overall system structure—"Input (extract from screen)" -> "Process (filter duplicates)" -> "Output (send to GAS)"—and a perspective of consideration for the data extraction source.

As long as this structural map is in your head, you can notice dangerous code produced by AI and order corrections, and even if the screen changes, you can give precise instructions to continue safely controlling the tool.

From being on the side used by tools, to being on the side that operates systems while commanding AI.

I hope you all will also learn the right way to interact with AI and acquire the "self-reliance" to build and maintain safe systems tailored to yourselves.

Part 3: The '1.5-Second Trap' Overlooked by AI. Avoiding Account Ban Risks Using Years of Scraping Experience

e-shikumi-labo — Sat, 01 Aug 2026 00:06:28 +0000

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

Hello, I'm Shin from e-Shikumi-Labo.

This is Part 3 of "Systematized Thinking," where we use AI to build our own tools and independently maintain them.

Last time, I talked about creating a system to automatically output Markdown (.md) files to Google Drive simultaneously with appending to a spreadsheet.

With list management in a spreadsheet and a comfortable viewing environment in Obsidian established, it was getting very close to completion as a tool.

However, as I continued to use it practically, new challenges emerged on the operational front. This time, I will share the risks I faced while transitioning from a "manual button" to "full automation," and the process of evolving into safe code.

1. I Want to Eliminate the "Hassle of Pressing a Button"

During the prototype stage, the system was designed so that logs were saved by pressing a button placed on the screen.

However, as long as a human operates it manually, there are inevitably limitations.

If you are concentrating on the conversation, you might forget to press the save button and close the screen.
If the conversation gets long, you might miss past utterances that are no longer displayed on the screen.

"If I have the screen open and am conversing, I want it to automatically save in the background without bothering human hands."

Thinking this, I asked the AI to write the code for full automation.

2. The Code the AI Produced: "Patrolling the Screen Every 1.5 Seconds"

When I consulted the AI, it immediately presented code for full automation.

The mechanism was, "Start a timer every 1.5 seconds, check the entire screen in the background, and send any new utterances."

When I actually tried it, the logs accumulated automatically as soon as I conversed without pressing the button, and at first glance, it looked like exceptionally well-done full automation.

However, I felt something was slightly off regarding this "monitoring on a 1.5-second cycle."

3. The Ban Risk Hidden in "It Should Be Fine Because It's Inside the Browser"

Initially, I thought, "It's just watching the screen on my own browser (local processing), so it should be fine."

However, drawing from my past experience with web data extraction (scraping), a sensation crossed my mind: "Showing unnatural behavior to the other party's server is dangerous."

So, just to be sure, I decided to check with the AI: "Is there any risk in this 1.5-second monitoring code?" Then, I received an unexpected response from the AI.

AI:

"Actually, there are risks.

External transmission (GAS) speed is too fast.

If you monitor on a 1.5-second cycle, data is transmitted externally every single time at a speed impossible for a human (within a mere 1.5 seconds) the moment Gemini's response finishes. From the other server's perspective, it can easily determine in one shot that 'logs are being forwarded at precise intervals immediately after a response = an automated tool is running.'

Monitoring programs exist even within the same browser.

Within the Gemini tab, Google's security scripts are also running in real-time on your own browser. If you monitor and manipulate the screen at an ultra-high frequency, there's a risk of triggering flags for mechanical detection."

Hidden behind the assumption that "it's safe because it's inside the browser" was a serious risk that could lead to Google account restrictions (ban).

The AI, focused on building the instructed functionality, hadn't considered things that far. It was a moment when I acutely realized that while AI can build "working code," it won't spontaneously calculate "account risks or consideration for the other party."

4. Encountering a Smart Mechanism by Making AI Think of Alternatives

To stop the dangerous 1.5-second patrol processing, I issued the following instruction to the AI:

"Please stop the periodic execution (timer processing) every 1.5 seconds. Please think of another safe method that does not burden the other party's server and has no account risks."

The human side doesn't need to know the "safe technology." Just point out the risk and throw it back, saying, "Do it a different way," and the AI will think of technical alternatives.

What the AI proposed was the browser's standard feature, MutationObserver (a feature that monitors screen changes).

I myself didn't even know such a convenient mechanism existed that could pinpoint and detect the exact moment a change occurred in the screen's HTML structure.

Furthermore, to prevent data from being sent multiple times while Gemini is in the middle of a long response, the AI also incorporated a contrivance into the code: "Wait 3 seconds after the screen movement stops, and send only once at the timing generation is complete (debounce processing)."

// Conceptual code inside content.js (Detect screen changes, send 3 seconds after coming to a rest)
const observer = new MutationObserver((mutations) => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    scanAndAutoSave(); // Execute send processing after screen movement stops
  }, 3000);
});

"Point out the risky method and make the AI think of another way."

Through this exchange, I was able to evolve it into a safe, efficient, fully automated saving tool that doesn't burden the other party's server.

Next Time Preview

Having successfully balanced full automation and safety, "Chat Saver for Gemini" was completed as a practical tool.

However, as long as you deal with tools that extract data from other people's websites, there is an unavoidable fate.

That is the problem of "it suddenly stops working one day due to changes in the other party's site design or specifications (updates)."

Next time, I will share calm coping strategies when the tool breaks, maintenance procedures using parser.js, and the core of the "self-reliance" humans should possess in the AI era. Look forward to it!

Part 2: Spreadsheets Are Hard to Read. Building a System to Auto-Generate Markdown Files Simultaneously via GAS

e-shikumi-labo — Sat, 01 Aug 2026 00:04:27 +0000

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

Hello, I'm Shin from e-Shikumi-Labo.

This is Part 2 of "Systematized Thinking," where we use AI to build our own tools and independently maintain them.

Last time, I talked about creating a Chrome extension that automatically saves Gemini chat logs to a spreadsheet.

Data successfully started accumulating in the spreadsheet, and I was satisfied for the time being. However, as I used it heavily in my actual work, a new desire emerged.

This time, I'll share the process of expanding the system from saving to a spreadsheet to 'auto-generating Markdown (.md) files'.

1. The Catalyst: Discovering "Obsidian"

Saving to a spreadsheet itself was convenient, but as the logs increased, I ran into a single problem.

When long responses or programming code are crammed into a single cell, they inevitably become hard to read and difficult to reuse.

Around that time, I started using the knowledge management app "Obsidian."

Obsidian is a tool that allows you to comfortably view and organize Markdown text files locally. The catalyst for everything was when I started thinking, "It would be convenient if I could accumulate useful conversations with Gemini here as Markdown files, too."

2. "If GAS Can Create Text, It Must Be Able to Do .md Too"

What came to mind then was the specification of Google Apps Script (GAS).

"If I use GAS, I can create and save text files in Google Drive. In that case, it should be able to output Markdown files with a .md extension, too."

With that inspiration, I immediately decided to consult the AI.

I wanted to avoid inefficient processes like sending data twice from the Chrome extension (the sender side), so I asked the AI to expand the code of the receiver side, GAS.

"I want to modify the current GAS code that saves to the spreadsheet. When data is received, please add a process to simultaneously append it to the spreadsheet and output a Markdown (.md) file to a specified folder in Google Drive."

GAS excels at integrating Google services with each other. In no time, a code was completed that, triggered by a single data reception, flawlessly executed both "writing to the spreadsheet" and "generating a .md file to Google Drive" simultaneously.

3. "The Line Breaks Disappeared?" Fixing a Bug with AI

However, when I conducted actual output testing, trouble occurred.

Although headings and bold text included in Gemini's responses were converted to Markdown syntax (# or **), for some reason, all line breaks in the text disappeared, resulting in one continuous line of text.

Since I couldn't understand the cause even by looking at the code, I communicated the phenomenon occurring on the screen exactly as it was to the AI.

[Human]
The text looks somewhat like Markdown, but all the line breaks have disappeared, turning it into a single continuous line. Please fix it so the line breaks are preserved.

Then, the AI gave this response:

AI:
"I apologize. When duplicating (cloneNode) the element on the screen in the background to extract text information, the line break rules were being ignored due to browser processing constraints. I will modify the logic to correctly supplement line feed codes based on the HTML structure."

It's sufficient to leave technical specification talk to the AI. Even if you can't decipher the code, simply communicating "the weird situation happening on the screen" exactly as it is allows the AI to identify the cause and fix it for you.

4. Ingenuity in "Title Extraction" Resistant to UI Updates

One more thing I contrived for practical application was the "method for acquiring the file name (chat title)."

If you try to parse and extract the HTML element containing the "title text" displayed on the Gemini screen, the tool will break immediately just by Google making a slight change to the screen design.

Therefore, I adopted a simple and robust approach.

It's the method of "acquiring the browser's tab name (document.title) and trimming unnecessary text (like - Google Gemini) from it to use as the file name."

// Conceptual code inside parser.js (Removing unnecessary text from the tab name)
let chatTitle = document.title
  .replace(' - Google Gemini', '')
  .replace(' - Google', '')
  .replace(' - Gemini', '')
  .trim();

While the internal structure of a webpage (HTML) changes frequently, the format of the title displayed in the browser tab tends to be less susceptible to change. When extracting data from someone else's site, this kind of design ingenuity—"taking data from places that are unlikely to break"—becomes crucial.

Next Time Preview

In addition to list management in a spreadsheet, we have achieved the automatic output of Markdown files to Google Drive, making it comfortable to view them in Obsidian.

I was satisfied, thinking, "I've made the perfect tool with this," but humans are creatures of desire.

"I wonder if it could auto-save completely without me having to manually think about it every time, as long as I have the screen open?"

As a result of asking the AI for full automation with that thought, I end up stepping into an unbelievable trap that threatens the security of my account...

Next time, I will deliver a piece on the dangers of the code the AI produced, and the "etiquette of not burdening the other party's server" that I've learned from years of web data extraction experience.

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

e-shikumi-labo — Sat, 01 Aug 2026 00:01:23 +0000

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 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."

4. About the Finished Tool: "Chat Saver for Gemini"

"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)

⚠️ 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."

5. Limitations in Practical Use (Not Bugs)

To prevent misunderstandings after introduction, I am also clearly stating the technical limitations (prerequisites).

⚠️ Conversations from the smartphone app cannot be saved. Because it utilizes the mechanism of a PC Chrome extension, it will not work from a smartphone.
⚠️ There is no bulk sync feature for past logs. However, even for past threads, if you simply open them once in a PC browser, it will automatically detect and save the most recent conversation.

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).

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."