{"slug": "how-to-maintain-ai-generated-chrome-extensions-when-web-uis-update-part-4", "title": "How to Maintain AI-Generated Chrome Extensions When Web UIs Update (Part 4)", "summary": "Shin from e-Shikumi-Labo released the final part of a series on maintaining AI-generated Chrome extensions, focusing on handling downtime caused by web UI updates. The post details how separating DOM parsing into an independent parser.js file allows users to quickly fix extensions by inspecting new HTML elements and asking AI to update selectors. Shin emphasizes accepting that tools depending on external platforms will break and that self-reliance means knowing where and how to fix them.", "body_md": "*This article was originally published on e-shikumi-labo.*\n\nHello, I'm Shin from e-Shikumi-Labo.\n\nThis is the final installment (Part 4) of \"Systematized Thinking,\" where we use AI to build our own tools and independently maintain them.\n\nSo 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.\n\nIn 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.\n\nDuring development, there was a time when I thought, \"I also want to record the exact date and time (timestamp) when the chat was sent.\"\n\nHowever, no matter how much I analyzed Gemini's screen structure, the exact timestamp of each utterance did not exist in the HTML.\n\nThe fundamental rule of web data extraction is: \"You cannot extract data that does not exist on the browser screen.\"\n\nAs 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.\n\nUnderstanding this \"technical limit,\" gracefully giving up on what cannot be done, and judging to maintain simplicity is also an important element of tool building.\n\nAs 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.\n\n\"It was working fine until yesterday, but suddenly it stopped saving.\"\n\nThis is not a defect in the tool, but an unavoidable \"fate\" as long as you depend on someone else's platform.\n\nThe 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.**\n\nIn 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`\n\n.\n\nBy separating the communication processing (`content.js`\n\n) and the parsing processing (`parser.js`\n\n) like this, even if Gemini's screen design changes, **you only need to modify designated places (like CSS selectors) inside parser.js.**\n\nIf it stops working due to a screen change, the tasks humans need to perform are as follows:\n\n**Check the new elements with DevTools (Inspect Tool)**\n\nOpen Gemini in Chrome, press the `F12`\n\nkey (or right-click > \"Inspect\"), and check and copy the new HTML structure of the prompt area and response area.\n\n**Request the AI to fix it**\n\nThere is no need to rewrite the code directly yourself. Pass the copied latest HTML elements and the current `parser.js`\n\nyou have to the AI and instruct it to make corrections.\n\nPrompt Example:\"The\n\n`parser.js`\n\nstopped working due to a Gemini UI update. I have attached the current`parser.js`\n\ncode, along with the latest HTML elements for the prompt area and response area. Based on this information, please modify the selector parts.\"\n\nEven 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.\n\nWhether you want to inspect the source code to build your own maintainable extensions or simply want a ready-to-use tool for your daily workflow, both editions are available:\n\n`MutationObserver`\n\ndetection and dual export to Google Drive (.md) and Google Sheets.What I wanted to convey throughout these four parts was not just how to build a tool.\n\nThere is no need to memorize JavaScript syntax or detailed coding methods.\n\nWhat 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.\n\nAs 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.\n\nFrom being on the side used by tools, to being on the side that operates systems while commanding AI.\n\nI 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.", "url": "https://wpnews.pro/news/how-to-maintain-ai-generated-chrome-extensions-when-web-uis-update-part-4", "canonical_source": "https://dev.to/maru0122/how-to-maintain-ai-generated-chrome-extensions-when-web-uis-update-part-4-13o1", "published_at": "2026-08-12 10:15:19+00:00", "updated_at": "2026-08-12 10:18:20.826035+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "artificial-intelligence"], "entities": ["Shin", "e-Shikumi-Labo", "Gemini", "Chrome", "Google", "Obsidian", "Google Drive", "Google Sheets"], "alternates": {"html": "https://wpnews.pro/news/how-to-maintain-ai-generated-chrome-extensions-when-web-uis-update-part-4", "markdown": "https://wpnews.pro/news/how-to-maintain-ai-generated-chrome-extensions-when-web-uis-update-part-4.md", "text": "https://wpnews.pro/news/how-to-maintain-ai-generated-chrome-extensions-when-web-uis-update-part-4.txt", "jsonld": "https://wpnews.pro/news/how-to-maintain-ai-generated-chrome-extensions-when-web-uis-update-part-4.jsonld"}}