Automate building Chrome Extensions with Antigravity and DevTools MCP (I/O Connect ‘26)

[music] >> Hey everyone. This talk is about building Chrome extensions and Chrome extensions have been around probably forever. And I'm pretty sure that every one of you already at one time had a Chrome extension installed. But how many of you have actually built a Chrome extension? I see two, three. Oliver, you Sorry, you don't count. Uh four hands. That's a shame. Because uh Come It's I think it's actually currently an probably the most exciting time for building building Chrome extensions. And you probably might be asking now, why now? And the reason for me is because it was never easier to build a Chrome extension. And the reason for this is modern coding agents have gotten really good at building Chrome extensions. And by building a Chrome extension, you can actually shape the browser to your need. You can shape the web to your need. And I think that's extremely powerful. And today I want to present you what I think is the best setup for building Chrome extensions using coding agent. My name is Sebastian Benz. I work at the Chrome developer relations team, and I'm here today with my colleagues Eva over there, uh Oliver, and Paddy over to the end. So, uh this is going to be a hands-on session, and they'll be very happy to help you with any questions that you might have. So, feel free to ask them. Uh Uh, so, what is the best way to build a Chrome extension using a a coding a coding agent? For me, there are three different pieces. And if you've seen all the workshops today, then you've probably heard about all of these already. So, of course, you need a coding agent. And I think antigravity, in particular the new release, brings many new features that makes it a really great choice. But, you not only need a coding agent. Your coding agent needs is the models sometimes lack in behind the knowledge. So, they're not necessarily aware of the latest APIs, the latest best practices. So, we have the modern web guidance skill pack that can teach a coding agent latest API updates and best practices. And yeah, you've probably already heard about the modern web guidance skill pack for all the different kinds of web APIs and best practices. But, you probably didn't know that there's also an optional Chrome extension skill included there that makes coding agents much more robust when it comes to building Chrome extensions. And the final piece is Chrome DevTools for agents. Because, uh, with Chrome DevTools for agents, since latest release, you can, uh, your coding agent can actually install extensions into the browser, it can trigger extension actions, and it can debug extensions. And this means it becomes full possible to fully automate building Chrome extensions. I think that really closes a critical gap when for building Chrome extensions using coding agents. Uh, by the way, I'm I'm I'm mentioning antigravity here. Of course, like modern web guidance and, uh, Chrome DevTools for agents, they work equally well with with any other kind of coding agent. So, and also during the workshop origin it says anti-gravity, you can of course download it, but if you've got another one installed, feel free to use that one instead. >> [snorts] >> So, but before um But before talking about getting started, I'll quickly give you an overview of you what you can do with Chrome extensions. And the first thing that you can do is you can enhance the web. And you can enhance the web by injecting JavaScript and CSS into any web page in the browser. In this case, here's a really simple example that analyzes a web page, discovers any kind of long-form text content, calculates the reading time, and injects a little bit into the page. Really simple example, but I think it demonstrates really well what's possible with Chrome extensions. You can analyze, change, and adopt web content. Here's another example. This is an an emoji picker, like a custom emoji picker that gets injected into any kind of input field. The cool thing about this is it works exactly the way I want it to work. And because I'm not really happy about the the built-in emoji pickers in different operating systems, so I simply built my own, and it's always available when I need it. And again, it's an example for tailoring web content to your own needs. And of course, you can replace any image on a web page with cat images. Silly, but I think it makes a point. If it's on a page, you you change it. But it's not only about enhancing web content, it's only also about customizing the browser. Here's an extension that analyzes a web page and extracts the color scheme by analyzing the use CSS and displays the color like presents the color scheme in a nice way in this in the side panel beside the web page. And this is an example for how Chrome extensions can act add additional UI to the browser like the side panel is probably the most powerful UI service, but there are more available. You can add pop-ups, extensions have the can have their own tabs, contacts menus, and and many more. So, but it's not only about adding UI, but you can also change browser behavior. This extension allows me to organize tabs into tab groups. In this case, they're organized by domain, which of course is really simple algorithm, but imagine now building your own tab organizer that organizes tabs exactly the way that you want them to behave and the way you actually need them to be organized. And here's the part that I think many people miss. Extensions are a fantastic way to optimize the way you can work in the browser. And for example, my favorite extension, it's not in the web store, it's something that Oliver actually built and I use every day. It's an extension that switches on my the key lights on my desk when I work at home whenever I enter a meeting in Google Meet. And when I when the meeting is over, it switches off the lights automatically. It's like I love this functionality and makes my life so much better. And I think it's a great example for a simple piece of functionality that greatly improved my workflow at home. And every extension here that I've shown you I've built with Antigravity and Chrome DevTools. And this has generally gotten so easy that I think it's now possible to build extensions just for yourself, just for fun. Because it's it's really a matter of firing up up a prompt and let the agent do its thing and then you have an extension that can help you enjoy the web better. And today I want to show you how you can do the same. How you can customize the browser to fit your needs. So, we're going to be doing several things. The first one is we're going to be setting up Antigravity. Then we're going to be building a very simple Hello World extension that's going to be really boring. But it's a great way to uh verify that every everything is working. But then we're going to be building a seriously cool extension that's going to be really useful. And then we're going to be preparing it for publishing it on the Chrome Web Store. And finally, if we have time, we can make our cool extension even better. So, let's go get started. For setup, uh here's the QR code. Maybe take a picture or uh quickly scan the the QR code. It leads you to the instructions on how to set up your coding agent. I will also manually walk through all the different setup steps because that's going to be the most complicated part of this workshop today. All right, good? Cool. So, we can get started. These are the instructions uh that you can find. First thing is we need to set up anti-gravity. I'm going to be using anti-gravity IDE and there's a simple reason I'm going to be explaining later. Uh, first thing is we have to to configure uh, the >> [snorts] >> modern web guidance skill and we have to configure uh, Chrome dev tools for agents. So, let's see if I can make it a little bit bigger. Yeah. Hope [snorts] Hope you can read it. So, the way you can do it is you go to customizations and there you can uh, see the build with Google plugins option. There you can customize Click customize and then you see all the different skills pack that are published or provided by Google. And yeah, download modern web guidance and Chrome dev tools. So, this means we now have all the skills installed that we need. Most notably, there's the Chrome extension skill down here. Now, the next thing we need to do is to install the Chrome dev tools MCP server. So, uh, I open add MCP server. Quickly going to search for Chrome. And it shows Chrome dev tools for agents. I'm going to be adding it. And here we go. And we see there are 29 tools enabled. So, the extensions tooling is not enabled by default to save context window size. So, we have to enable it first. And to do this you we need to manually uh, adapt the the MCP configuration. And we do this by clicking open MCP config here. And it's going to be opening the configuration. And this is all the also the reason why I'm using antigravity IDE because antigravity non-IDE hasn't got this button yet. You can still configure the the MCP server, but you have to do it manually on the file system, which for workshop I find a little bit harder to do. So, uh let's close the settings. And here we have our configuration for the DevTools MCP server. And I'm going to be adding two parameters. The first one is to enable the the extensions tools. So, that's called category extensions. And the second one it's called auto connect. So, category extensions enables the extensions tools. Auto connect changes the way how your coding agent connects to Chrome. By default, um the Chrome DevTools MCP server will start a new Chrome instance in a separate Chrome profile. That's a great default and works for many cases, but some features like the Chrome built-in API APIs are not available in these uh testing specific profiles. So, what we're going to be doing instead, if you want to use these features, I'm going to connect to an existing running Chrome instance. And I do this by adding the auto connect flag. So, I save. Now, we need to restart antigravity so the configuration gets picked up. I can do this by checking in the settings. Now, let's make it a little bit bigger. So, here under customizations, I have the MCP server and we see there are now 34 tools installed and there are those tools like reload extensions and install extensions so on. This means our the MCP server is set up correctly. Now, the only missing thing we have to do is we have to set up Chrome. So, we have to go to Chrome inspect and there's an option remote debugging. And we check the first one, allow remote debugging for this browser instance because it's it's threat like it's a powerful feature for coding agent to connect to a running Chrome instance. That's why you have to manually enable it and there's another check that you will see later. Okay? Uh So, make sure to to have this enabled and now we have set everything up and we can actually give it a try. And we're going to try it by saying, "Okay, build a Chrome extension that shows a Hello World message in a pop-up. Uh test with Chrome DevTools. Keep it simple. Take a look at the Chrome extension skill and it's also accessing Modern Web Guidance client because we need to build some UI. So, it's good to also consult like the Modern Web Guidance skill. And uh it starts uh actually wow, it's has already built the extension. And uh it's using the Chrome DevTools MCP server to actually No, it's actually it just analyzed the the different tools that are available, created an implementation time. I'm not going to take a look this time. I'm just going to It's going to be fine and let it implemented. So, it's working. Now, it's actually building the extensions, creating the manifest, building the pop-up, writing some CSS. Is anyone following along? Did setting things up work for you? Okay, and here we see that it's ready. It It did build the extension. Now, it wants to test it in Chrome. And the MCP server wants to connect to Chrome and there's this additional dialogue I have to confirm to allow the coding agent to control Chrome. And you only have to do this once at the beginning of a session. And we see here, okay, it opened the the pop-up uh window uh and uh it's analyzing the page whether it's working as expected. That's by the way a completely over-engineered Hello World page, if you ask me, but uh this is the way, I guess. So, but you What you can see here, it's it's using different tools to verify that this actually works. So, it takes a screenshot to check how it looks. And uh I really don't know why it now wants to run outside the sandbox. I don't think we need this right now. >> [snorts] >> And uh yeah. So, uh you see, gives us a walk through. And says, "Okay, captured the visual screenshot." And uh one thing I'm not happy about, to be honest, because uh the extension works by uh you actually click on the extension action to trigger the pop-up, which is what I asked. So, it didn't specifically test this flow here. So, I could say, "Okay, uh test clicking the extension. I can open the pop-up. Look how many see. Okay, now it actually detected the correct way by clicking the extension icon. That's hasn't been possible until like 1 month ago that like uh agents but now the automation tools are able to actually trigger this functional piece. I'm super happy that this is finally available. So, but I think our Hello World extension is done. And now we can actually build something cool. So, let me quickly clean everything up. So, I'm going to be deleting all the files. You're going to not going to be needing them anymore. And I'll start a new chat. So, what I want to do now is I want to build uh a Chrome extension that shows uh uh uh uh auto completion when typing exclamation mark exclamation mark tab inside any kind of text input field. And what should happen then? It should show auto completion for an ad uh it should show all open tabs and when selecting one it should insert the link. Because the thinking here is like when I'm for example uh writing an email and I want to include an a link you it's the likelihood that I've got this link I want to include that I've got it open somewhere in the tab is very high. So uh instead of going to the tab copying the URL and pasting it I can simply directly add it from within uh my editor. Okay, so this is a slightly more complex uh extension and uh let's see how it does here. So again it's I think it's using the different skills and again it's implement generating an implementation plan and this time I'm going to be taking a look and I think this is for me one of the best features of Anti-Gravity because I really love the way how they handle uh implementation plans because I can now review what it wants to do and so uh here okay is catch a manifest file use the tabs permission yeah it's going to be generating icons. Uh yeah, that sounds all good. And uh what you can do is you can add comments in line if you want something to be changed. So one thing I want to do is kind of like when uh so shift and enter when I press it to together uh it should insert uh a markdown link. Uh uh use the tab title as anchor text. Okay, so then we have premium CSS styles. I don't need premium premium CSS styles. I want to keep it simple. Make it look like an IDE. Okay. It's going to create some documentation verify. And so it's going to be manually verifying it. That's not what I want to do. Test it using Chrome DevTools. So, I reviewed the plan, added some feedback, and now I can click proceed and it will actually start building the extension. And that's a flow, I think, that I really like because it's uh I find it a very natural way to to review a plan before actually letting the coding agent build it. So, again, we see it working. It's generating icons. Generating icons is was the first thing, by the way, that I added to the Chrome extension skill because it turned out many coding agents struggled generating valid icons for extensions. That was really interesting. Like sometimes they would generate the files, but then declare different names in the manifest, or they would generate weird icons. Like different resolutions would have completely different icons. So, yeah. The Specifying some instructions how to handle icons definitely made things much more robust here. So, uh Again, we see okay, it's already analyzing the different speed tools. So, uh let's see what it does. Okay, ah so it actually built a test page so that uh it can actually test the different scenarios. So, we've got standard text with input fields, we've got text areas and content adaptable content editable fields. So, this are actually the three main scenarios. And uh some of the tests are so fulfilled, okay. Okay, now it's entered the text field and we see we've got code completion already working. It pretty much does what we want it to do. I have some questions around the transparent background. But and there apart from that I think that works pretty works, so well. So, it's it can inject markdown. And uh yeah. It works in all three different kinds of input fields. So, and I think it's done. And I think it's It's amazing. So, I think we've built a truly useful Chrome extension with a single prompt. And we can be pretty sure it works because the coding action actually was able to verify this directly in Chrome. Uh I think it's actually so great, I maybe could publish it on the Chrome Web Store. And that that's another part of the skill. So, that's about prepare getting an extension ready for publishing it on the Chrome Web Store. So, what I'm going to be doing now is going to say, "Prepare for publishing on the Chrome Web Store." So, we see a reviewed uh uh like basically part of the skill is uh Where was it? Part of the skill is a like a checklist. Uh where was it? Okay, I can't find it. Anyway, the skill includes a checklist like the coding action needs should go through to make sure everything is is ready prepared. And the other thing is it will create a Chrome Web Store MD file. And uh that file includes all the different information that you need if you want to uh publish an extension. So, uh for the store listing, you need the name, so it suggests one, a short description, a more detailed description. It already suggests like a category. There's only a fixed set of categories for Chrome extensions. And there are different things that you need to specify, kind of like the single purpose uh of your extension, which is one of the important things like uh that you need to be aware of when publishing an extension. It will suggest tells you which screenshots and icons you need. It doesn't generate them like generate an icon but not the screenshots. You could for example tell it to generate a screenshot and it will do this using Chrome DevTools. But I would then be really precise on when you want to take a screenshot. But it makes suggestions on how to do. Another really important thing um permissions are really important thing for Chrome extensions because they can be really powerful. So you have to explain for the Chrome Web Store reviewers why you're using a specific extension. And again it makes note of all the different permissions that are used and proposes uh justification for this. And I think this works really well and is really useful. So it will fill out a data usage guide. It will generate a privacy policy and add many more fields. Of course you can't shouldn't copy this straight away and use all the information because some things it can't know. For example it doesn't know my email address so it just uh suggested one. So I would strongly recommend reviewing this but I think it's a really great starting point for publishing an extension. And I said and I think yeah that's kind of like shows the whole flow from uh having idea for Chrome extension, building it and getting it ready for publication on the Chrome Web Store. >> [applause] >> Thank you. But I thought if we have a little bit more time we can make it even better. And I think we have a few more 10 more minutes left. That's great. So we that's plenty of time for us to actually make this even cooler. And uh So, one thing that's actually kind of like a pet peeve of mine is like when with this is uh when I have some I have some text here. So, for example, let's say uh check out our new project. And then I'm going to include a link to the uh Modern Web Guidance project. So, I'm going to include this and I'm going to be using a Markdown link. It will use the title of the page. And check out our new project GitHub Google Chrome Modern Web Guidance GitHub. It's not a really great anchor text. And uh I think we should make this better. And the idea is to use Chrome's built-in prompt API to actually suggest a better anchor text name for uh to inject it based on what's already in the in the input field. So, let's see how well this this works. So, uh Okay. So, first, how do we prompt this? We say uh when inserting Markdown >> [snorts] >> uh use Chrome's prompt API to generate an anchor text anchor text that matches the previous content content of the input field. Actually, anchor text, let's make it say like three to 10 words anchor text that matches the input field. Okay, let's go. And this is the part we see it's already using the prompt API guide from Modern Web Guidance. And the prompt API the API has changed so much over the the initial experimentation phase and then the origin trial that in most cases coding agents will get it wrong out of the box. But with the skill we have the latest version of the API available and it's actually gotten really good at using Chrome's built-in APIs. So, let's see how this goes. Okay, it has our input page. We see here it's checking the availability of the model. Inserting the link. And that didn't look like it worked. So, but maybe it's actually so that's a really interesting thing like when you're using Chrome DevTools MCP server is it's really interesting how coding agents use it. Sometimes they will they're really good at injecting scripts at runtime to access to say to trigger certain conditions and and in general like to debug your your extension in this case and uh yeah, I think it's super interesting to see and can be really powerful. So, okay, you see it's giving another try. But this actually looks good. I don't hope you can read it. Uh it actually generated a much better uh ta- anchor text. So, it said, "By reading Rock Paper Scissors setup guide for Chrome extensions." It's definitely better what we what we had before. One next step would be to actually uh tell it to show a loading indicator while it's using the prompt API to to generate the the link description. I know this was maybe a little bit fast, but I hope I've seen and ideally try it for yourself how easy it has become to build modern Chrome extensions and and how powerful it can be when your coding agent can actually install and debug install extensions and actually debug them. I think that's really a critical gap that has been closed and makes the whole development flow so much easier. And most importantly, what I hope that you've seen is that extensions are really powerful. You can shape the browser and the web to your needs. And uh yeah, it's so easy now to do this. So, I hope you take this a little bit of an inspiration to next time you face something annoying on the web or the browser doesn't exactly do what you want, go out, build an extension, and improve your life a little bit. Thanks a lot. >> [music]