Video summary
The video addresses the unpredictable nature of London's summer weather, where conditions can shift rapidly from sunshine to rain within a single afternoon. To navigate this volatility without constantly checking forecasts manually, the creator decides to build a custom Chrome extension that displays real-time weather data directly in the browser. This project serves as an introduction to leveraging advanced coding agent tools and specific skills designed to streamline web development tasks, particularly for building extensions efficiently.
To achieve this goal, the tutorial focuses on setting up two key technologies: Modern Web Guidance and Chrome DevTools for Agents. The first tool provides a specialized skill that embeds best practices and browser compatibility data directly into the coding agent's workflow when developing extensions. By installing these plugins through settings or command-line interfaces depending on the specific coding environment used, developers ensure their agents generate code adhering to current standards without requiring manual intervention for every step of the process.
Once the tools are configured, the video demonstrates an iterative development cycle where a coding agent named Antigravity builds and refines the weather extension in real-time. The agent initially creates a basic popup displaying London's current conditions with dynamic icons that change based on the forecast, but it quickly evolves to include features like more frequent data fetching and a three-day outlook after receiving feedback from the user. A crucial advantage highlighted is how Chrome DevTools for Agents allows the AI not only to write code but also to automatically install, reload, and debug extensions within the browser session, eliminating the need for manual refreshes or troubleshooting steps typically required in traditional development workflows.
Ultimately, the project showcases a seamless integration of best-practice context with automated debugging capabilities that removes friction from extension creation. By combining these specific skills and tools, developers can rapidly prototype complex applications like weather trackers while ensuring they function correctly within the browser environment immediately after coding. The video concludes by encouraging viewers to adopt this workflow for their own projects, emphasizing how modern AI assistance transforms a tedious task into an efficient, automated process that adapts iteratively based on user needs.
Read the full video transcript
Living in London during the summer, you
can easily go from needing sunglasses to
needing an umbrella three different
times in a single afternoon. Because the
sky changes so fast, I want an easy way
to glance at my browser and know what
I'm walking into when I leave the
office.
So, today I'm going to use some cool new
coding agent tools, our extension skill
and Chrome DevTools for Agents, to build
a weather extension to save my next
commute home.
>> [music]
>> Today, we're going to work in
Antigravity, but you can use these tools
with any coding agent. Check out the
link in the description for installation
instructions for your coding agent of
choice.
Now, first, let's give our agent the
exact rulebook for extension
development.
Modern Web Guidance is a set of skills
that embed web platform expertise, best
practices, and browser compatibility
data directly into your coding agents.
It has an extension skill, which we will
use today.
Jumping into Antigravity, we can add the
extension skill by going to settings,
customizations,
Build with Google plugins,
and downloading Modern Web Guidance,
which comes with the extension skill.
The recommended installation for most
other coding agents, like Cloud Code and
Codex, is through the Modern Web
Guidance CLI. During the CLI
installation, you need to choose to add
the extension skill pack. Now, whenever
the agent writes code for us, it will
use all of the latest best practices our
team has for building Chrome extensions.
Next, we'll install Chrome DevTools for
Agents, which gives AI coding assistants
the ability to install, uninstall,
reload, and debug extensions directly in
Chrome.
Let's go to settings,
customizations,
Add MCP, and look for dev tools.
Let's add Chrome dev tools for agents.
Now I need to go back and
edit the MCP config file to add the
extensions category.
I'm going to add category extensions.
And let's refresh.
And I can see we've added a few more
tools for extensions.
You can also find this file in your
agent's configuration directory. For
Antigravity, this will be in
.gemini/config/mcpconfig.json.
With our tooling set up, let's give it
the initial prompt.
Build a Chrome extension using a free
weather API
to show weather in London in a pop-up.
The extension icon change to reflect the
weather conditions like sun, rain, or
clouds. Then test the extension in the
browser using dev tools MCP to verify it
works.
Let's let Antigravity do its thing.
And here's an implementation plan for me
to review.
Hmm. Let's fetch weather more often.
Let's make it a 15-minute alarm.
Okay, looks good to me. Let's proceed.
Amazing. Antigravity launches the
browser, loads the extensions, and I I
see it's another sunny day in London.
Fantastic.
This is great, but I've got a picnic
later this week and I want to be
prepared. Luckily, development is
iterative. Let's try adding a forecast
feature to my extension.
Add a 3-day forecast to my extension and
test it in the browser to verify it
works.
All right, that worked and it looks like
it's going to be another hot day.
Because the DevTools MCP has access to
the browser session, the agent doesn't
just write the code. It triggers an
automatic reload and validates the
state. No manual extension loading, no
need to click the refresh button 50
times. So, by combining best practice
context with automated debugging in the
browser, you can eliminate the manual
friction of extension development. Be
sure to install the extension skill, set
up your DevTools for Agents
configuration, and try it out on your
next project. Let me know in the
comments what you're building next and
see you in the future episode of
Developer Mode.
>> [music]
[music]