Video summary
This episode of Developer Tooling Tips introduces a powerful capability within Chrome DevTools for agents, allowing coding agents to install, debug, and interact with Chrome extensions directly. While agents often have basic browser access by default, their capabilities are frequently limited without additional tools. By enabling the specific category flag in the MCP configuration, developers can unlock these advanced features, giving their agents the ability to load extensions from disk, open pop-ups, and manipulate extension content. This setup is particularly useful for testing extensions built manually or by agents themselves, ensuring they function correctly within the browser environment before deployment.
The practical demonstration involves a custom to-do list extension designed to track tasks during a trip to India. The agent successfully installs the extension, opens its interface, and interacts with it to check off a specific task related to filming the show. Behind the scenes, this process relies on three key tools: an install extension tool to load the add-on, a trigger extension action tool to open the pop-up, and a general snapshot tool to read the page content and locate interactive elements like buttons. Once the agent identifies the necessary button, it uses a click command to complete the action, showcasing how agents can perform complex workflows involving browser extensions with minimal human intervention.
Technically, this functionality is built upon the Chrome DevTools protocol, which serves as the foundation for controlling browsers in automated testing environments like Puppeteer. Recent updates have exposed new extension-related capabilities within this protocol, enabling features such as installing and managing extensions directly from agents. This approach ensures that advancements made in one tooling ecosystem, such as adding support for pinning or unpinning extensions in Puppeteer, automatically benefit Chrome DevTools for agents and vice versa. Furthermore, these developments contribute to broader industry efforts through the W3C Web Extensions community, helping to improve cross-browser compatibility and adding new tests to the Web Platform Test suite to ensure predictable behavior across different browsers.
In conclusion, integrating Chrome DevTools for agents represents a significant step forward in automating browser extension development and testing. The setup process is quick, taking only a few minutes to configure, yet it offers a transformative capability for developers who need rigorous testing of their extensions. As the community continues to refine these tools and expand their capabilities, they will become even more integral to the modern web development workflow. Viewers are encouraged to explore additional resources on the channel, including workshops from previous events, and to stay tuned for future episodes that will delve deeper into using these tools alongside modern web guidance techniques.
Read the full video transcript
Let's talk about how to let your coding
agent install Chrome extensions in this
special episode of developer tooling
tips on tour from India at IO Connect
Bengaluru.
>> [music]
[music]
>> You can use Chrome DevTools for agents
to let your coding agent install and
debug Chrome extensions. And while
Matías is away, I'm going to show you
how. Let's talk through when that might
be helpful as a developer and how to get
it set up. Once you've built a Chrome
extension, either by hand or using a
coding agent, you need to test it in the
browser.
Agents often have a way to access the
browser out of the box, but their
capabilities are often limited. Chrome
DevTools for agents has additional tools
enabling your agent to control
extensions, too. Learn how to set it up
through this link.
With DevTools for agents, we want to be
very mindful of use tokens in the
context window.
As a result, we don't enable the tools
specific to Chrome extensions by
default. So, after installing, find your
MCP config and add the {dash} {dash}
category extensions flag. That'll get
you ready to go.
With everything set up, let's take it
for a spin.
I built this to-do list extension to
keep track of everything I want to do
while I'm in India. Let's ask my agent
to install the extension, open the
pop-up, and check off the task to film
developer tooling tips.
And away it goes.
How did this work?
Using the install extension tool, our
agent can load the extension from disk
into Chrome.
Then, using the trigger extension action
tool, it can open our extension's
pop-up.
Finally, using the more general take
snapshot tool, it can access the
contents, allowing it to check that
everything loaded and find the button to
complete the task. It can then interact
with the button using click, finishing
the process.
If you want to see examples of using
this to build something, we have some
great content on the channel. Check out
Sebastian's video from IO Connect Berlin
to see a full recording of a workshop he
gave on this topic through this link.
It's a brilliant resource and I'm so
glad we get to share it more broadly.
And keep an eye out for an upcoming
episode of developer mode where Milica
shows how to use Chrome DevTools for
agents along with modern web guidance to
stay dry in rainy weather.
There's still no sign of Matias. I know
you're here for the technical details.
So, let me tell you a bit about how all
of this works behind the scenes. Follow
me.
We build Chrome DevTools for agents on
top of the Chrome DevTools protocol.
This is the underlying protocol used by
Chrome DevTools and tools like Puppeteer
to control the browser.
Last year, after exposing new
extension-related capabilities in the
Chrome DevTools protocol, we were able
to launch new features in Puppeteer to
make it easier to install extensions in
automated tests.
Now, we've been able to directly expose
those same capabilities in Chrome
DevTools for agents. The great thing
here is that any work we do for any of
our tooling is likely to benefit the
rest of our tooling ecosystem. So, if we
add any new capabilities to Puppeteer,
say pinning or unpinning an extension,
we'll be able to add that to Chrome
DevTools for agents at the same time.
And the same should be true the other
way around.
This is also directly helping with our
work in the W3C Web Extensions community
and working groups to make extensions
more compatible across browsers.
The Web Platform Test project is a test
suite shared by browsers to make sure
they behave predictably. And using these
new capabilities supported by Chrome,
we're adding Web Platform tests for the
extension APIs.
Finally, some extensions content in
developer tooling tips. I hope I can
bring you more in the future, but to
recap, install Chrome DevTools for
agents to give your agent the ability to
install and debug Chrome extensions. It
only takes a few minutes and it's a
total game changer. Matias will be back
with more tips soon. Until then, from
India, thanks for watching.
>> [music]
[music]