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

[00:05] - Hey everyone. This talk is about building Chrome extensions and [00:12] Growth extensions have been around probably forever. [00:15] And I'm pretty sure that every one of you... [00:19] already at one time had a Chrome extension installed [00:24] But how many of you have actually built a Chrome extension? [00:29] I see two, three, Oliver, sorry, you don't count. Four hands. [00:34] That's a shame. [00:35] Because [00:38] I think it's actually currently an [00:41] Probably the most exciting time. [00:44] for bedding Chrome extensions. [00:46] And you probably might be asking, "Oh, why now?" [00:49] And the reason for me is... [00:52] because it was never... [00:54] easier to build a Chrome extension. [00:57] And the reason for this is [00:59] Modern coding agents [01:01] have gotten really good... [01:03] at building Chrome extensions. [01:05] And by building a Chrome extension, you can... [01:08] Actually, [01:09] shape the browser to your need. You can shape the web to your need. [01:14] And I think that's... [01:15] extremely powerful. [01:18] And today I want to present you what I think [01:21] It's the best set up [01:23] for [01:24] building Chrome extensions, [01:26] using coding. [01:28] My name is Sebastian Benz. [01:30] at the Chrome Developer Relations team, and I'm here today [01:33] My colleagues, Eva, over there.

[01:36] Oliver and Patty [01:39] over to the end. [01:40] So... [01:42] This is going to be a hands-on session. [01:44] And-- [01:45] They would be very happy... [01:47] to help you with any questions. [01:49] that you might have. [01:51] feel free to [01:53] Awesome. [01:55] So, what is the best way [01:58] to build a Chrome extension using a [02:01] a coding agent. [02:03] For me, there are... [02:05] three different pieces and if you've seen all the workshops today then you've probably heard about all of these [02:11] already. [02:12] So, of course, you need a coding agent. [02:16] I think anti-gravity in particular, the new release brings many [02:20] new features that makes it a really great choice. [02:23] But you not only need a coding agent, your coding agent [02:27] needs to [02:28] It's like, well, the models-- [02:30] sometimes lack behind in knowledge, so they're not necessarily aware of the latest APIs, the latest best practices. [02:37] So we have the Modern Web Guide and Skill Pack [02:40] that can teach a coding agent [02:43] latest IPI updates and best practices. [02:46] And [02:47] Yeah. [02:48] probably already heard about the modern guidance skill pack. [02:52] for all the different kinds of web APIs [02:55] and best practices. [02:56] But you probably didn't know that there's also an optional Chrome extension skill included there. [03:03] that makes coding agents much more robust [03:06] when it comes to building.

[03:07] Chrome extensions. [03:08] And the final piece, [03:10] is Chrome DevTools for Agents. [03:12] because with Chrome Lifts for ATEMs, since the latest release, [03:17] You can... [03:19] your coding agent can actually [03:22] install extensions into the browser, it can trigger extension actions, and it can [03:27] debug extensions [03:29] And this means it becomes possible to fully automate [03:33] Burning Chrome extensions. I think that really... [03:36] closes a critical gap [03:39] when for building Chrome extension using coordinates. [03:43] By the way, I'm mentioning [03:46] and the gravity here. [03:48] Of course, like Modern Web Guidance and Chrome DevTools for Agents [03:53] They work equally well with any other [03:56] kind of coding agent. [03:57] So, and also during the workshop, it says anti-gravity. [04:01] You can, of course, download it. [04:03] But if you've got another one installed, feel free to use [04:06] that one. [04:07] Instead. [04:09] So, but... [04:11] Before... [04:12] Thank you. [04:14] But before talking about getting started, [04:18] I want to quickly give you an overview of what you can do [04:21] with Chrome extensions. [04:23] And the first thing that you can do is you can enhance the VAP. [04:27] And you can enhance the web by injecting JavaScript and CSS [04:32] into any web page in the browser. [04:35] In this case, here's a really simple example that

[04:39] analyzes a web page, [04:41] discovers any kind of long form text content. [04:44] calculates the reading time and injects a little widget into the page. [04:48] Really simple example. [04:51] But I think it demonstrates really well [04:53] what's possible with Chrome extensions. [04:55] you can [04:57] Analyze. [04:58] change and adapt. [05:00] back content. [05:02] Here's another example. [05:03] This is an emoji picker. [05:06] like a custom emoji picker that gets injected into any kind of input field. [05:12] The cool thing about this is [05:14] It works exactly the way I want it to work. [05:17] And [05:18] because I'm not really happy about the built-in MLG because of different operating systems, so I simply built my own. [05:26] And it's always available. [05:28] when I need it. [05:29] And again, [05:30] It's an example for [05:32] tailoring web content to your own needs. [05:36] Thank you. [05:36] And of course you can replace any image on a web page with cat images. [05:41] Silly. [05:42] But I think it makes a point, if it's on a page, [05:44] You can change it. [05:46] But it's not only about enhancing web content. [05:49] It's also about [05:51] customizing the browser. [05:53] Here's an extension that [05:56] analyzes a web page, [05:59] And... [06:00] extracts the color scheme. [06:01] by analyzing the UCSS. And this place-- [06:06] presents the color scheme in a nice way

[06:09] in the side panel. [06:10] this side of the webpage. [06:12] And this is an example for how Chrome extensions can add additional UI to the browser. Like the panel is probably the most... [06:21] powerful UI service, but they're more available. You can add pop-ups, extensions, can have their own tabs, contacts, [06:27] menus, and many more. [06:31] So, but it's not only about adding UI, [06:33] but you can also change [06:35] browser behavior. [06:37] This extension [06:39] allows me to [06:41] organize tabs into tab groups. In this case, they are organized by [06:46] domain. [06:48] Which, of course, is... [06:49] Really. [06:51] simple algorithm. [06:53] But imagine now, [06:55] building your own tab organizer [06:57] that organizes caps exactly the way [07:01] that you want them to behave and [07:03] the way you actually [07:05] need them to be organized. [07:08] Thank you. [07:09] And here's the part... [07:10] that I think many people miss. [07:13] Extensions are a fantastic way to [07:16] optimize the way [07:18] You can work on the browser. [07:19] 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. [07:26] It's an extension that switches on... [07:29] The key lights on my desk. [07:31] when I work at home, whenever I end a meeting in Google Meet. [07:36] And when the meeting is over, it switches off the lights automatically.

[07:40] It's like, I love this functionality and makes my life so much better. [07:44] And... [07:45] I think it's a great example for a simple piece of functionality that greatly improved [07:49] my workflow. [07:51] at home. [07:52] And every extension here that I've shown you [07:54] I've been with [07:56] Anticravity and Chrome DevTorts. [07:59] And this has-- [08:00] generally gotten so easy. [08:02] that I think it's not possible to [08:05] Build extensions just... [08:07] for yourself, just for fun. [08:09] Because it's really a matter of [08:12] firing up a prompt [08:13] and let the [08:15] agent do its thing, and then you're [08:17] half. [08:18] an extension that can [08:20] help you enjoy the web better. [08:23] And today, I want to show you how you can do [08:26] the saints. [08:27] How you can customize the browser to fit your needs. [08:32] So-- [08:33] We're going to be doing several things. [08:35] The first one is we're going to be setting up Antiquavity [08:39] Then we're going to be building a very simple Hello World extension that's going to be really boring. [08:44] But it's a great way. [08:46] to [08:48] verify that everything is working. [08:51] But then we're going to be building a seriously cool extension that's going to be really useful. [08:55] And then we're going to be preparing it [08:58] for publishing it on the Chrome Web Store. [09:00] And finally, if we have time, we can make our cool extension [09:04] Even better. [09:05] So let's get started. [09:08] For set up, [09:09] Here's the QR code.

[09:11] Maybe take a picture or... [09:14] quickly scan the QR code. [09:16] It leads you to the instructions on how to set up [09:18] your coding agent. [09:20] I will also... [09:21] manually walk through all the different setup steps, because that's going to be the most [09:26] complicated part [09:28] of this workshop today. [09:29] All good? [09:31] Cool. [09:32] So we can get started. [09:34] These are the instructions that you can find. [09:38] first thing [09:39] is we need to set up Antiquette here. [09:42] I'm going to be using antiquity IDE and that's the simple reason I'm going to be explaining [09:46] later [09:48] ... [09:48] First... [09:49] thing is we have to [09:51] to configure [09:53] Uh-huh. [09:55] The Modern Web Guidance skill [09:58] And... [10:00] we have to configure [10:03] Chrome DevTools for agents. So let's see. [10:06] if I can make it a little bit bigger [10:08] Yeah? [10:09] I hope you can read it. [10:11] So the way you can do it is you go to customizations. [10:15] And there you can see the Build with Google plugins [10:20] option. [10:21] There you can customize. [10:23] Click Customize, and then you see all the different skills packs that are provided by Google. [10:29] And, yeah, download Modern Web Guidance. [10:32] and [10:33] Kram Daftals. [10:35] So this means we now have all the skills installed that we need, most notably

[10:41] There's the Chrome extension skill. [10:44] down here. [10:46] Now, the next thing we need to do is to install the Chrome DevTools MCP server. [10:53] So-- [10:55] I open at MCP server. [10:58] quickly going to search for Chrome. [11:00] It shows Chrome DevTools for agents. [11:03] I'm going to be adding it. [11:06] and [11:08] Here we go. [11:09] And we see there are 29 tools enabled. So the extensions tooling, [11:15] is not enabled by default to save context window size. [11:20] So we have to enable it first. [11:22] To do this, we need to manually [11:25] adapt the MCP configuration. [11:28] And we do this by clicking Open MCP Config here. And it's going to be opening the configuration. [11:35] And this is also the reason why I'm using anti-crevity IDE. [11:39] because endgravity, non-IDE, hasn't got this button yet. [11:43] You can still configure the MCP server, but you have to do it manually on the file [11:47] system which for a workshop I find a little bit [11:50] Harder to do. [11:52] So, [11:54] Let's close the settings. [11:56] And here we have our configuration [11:59] for the DevTools MCP server [12:01] and I'm going to be adding two parameters. The first one [12:05] is to enable the [12:08] the extensions tools, so that's called category extensions.

[12:14] And the second one, [12:16] It's caught. [12:18] Auto connect. [12:21] So category extensions enables [12:24] text-rent-installs. [12:25] Auto-connect changes the way how your coding agent [12:29] connects to Chrome. [12:31] By default, [12:33] the Chrome DevTools MCP server will start a new Chrome instance in a separate Chrome profile. [12:41] That's a great default and works for many cases. [12:44] But-- [12:45] Some features like the Chrome built-in AI APIs [12:49] are not available. [12:51] in these... [12:52] testing specific sprawl files. [12:56] So what we're going to be doing instead, if we want to use these features, I'm going to [13:00] connect to an existing running Chrome instance. [13:04] And I do this [13:05] by adding the auto connect [13:07] Fleck. [13:08] So I save. [13:10] Now we need to restart anti-gravity. [13:13] So the configuration gets picked up [13:17] I can do this by checking in [13:20] The settings. [13:22] All right. [13:23] Make it bigger. [13:25] So here under customizations, I have the MCP server, and we see there are now [13:30] 34 tools installed and there are tools like reload extensions [13:34] and install extensions and so on. [13:37] This means-- [13:39] But [13:40] the MCP server is set up correctly. [13:43] Now, the only missing thing we have to do

[13:46] is we have to set up Chrome. [13:48] So we have to go to Chrome Inspect. [13:52] And there's an option, Remote Debugging. [13:55] And we have to check the first one, allow remote debugging for this browser instance, [14:00] because it's [14:02] It's a powerful feature for a coding agent to connect to a running Chrome instance. That's why you have to manually enable it. And there's another check. [14:12] that you will see later. [14:13] Okay. [14:15] Uh... [14:16] So make sure to have this enabled. And now we have... [14:21] Set everything up. [14:22] and we can actually give it a try. [14:24] And we're going to try it by... [14:27] saying, okay, BILD, [14:28] a crong [14:29] extension. [14:31] That shows... [14:33] Hello world message in a [14:36] Pop up. [14:38] test with [14:39] Chrome DevTools. [14:42] Keep it simple. [14:44] Take a look at the Chrome extension skill [14:47] And it's also accessing modern web guidance, because we need to build some UI. [14:52] So it's good to also... [14:54] consult like the one-on-one guidance guild. [14:57] and [14:59] It starts... [15:02] Actually, wow, it has already built the extension. [15:06] and it's using the Chrome DevTools MCP server [15:10] to actually-- no, it's actually just [15:13] analyzed the different tools that are available,

[15:17] create an implementation time. I'm not going to... [15:20] Take a look this time. I'm just going to... It's going to be fine. And let it implement it. [15:27] So it's working now. It's actually building the extensions, creating the manifest. [15:32] Spending the pop-up. [15:38] Creating some CSS. [15:43] Is anyone following along? [15:46] that [15:47] Setting things up work for you? [15:51] OK. And here we see that it's-- [15:55] It did build the extension, now it wants to test it in Chrome. [16:00] And the MCP server wants to connect [16:03] to Chrome and there's this additional dialogue I have to confirm [16:07] to allow the coding agent to control Chrome. And you only have to do this once at the beginning of a session. [16:14] Let me see here, okay. [16:16] It opened the pop-up... [16:18] window and [16:21] is analyzing the page, whether it's [16:24] working as expected. [16:26] That's, by the way, a completely over-engineered Hello World. [16:30] page if you ask me. [16:31] But-- [16:33] This is the way, I guess... [16:35] So what you can see here, [16:38] It's using different tools to verify that this [16:41] actually works [16:43] So it takes a screenshot, [16:44] to check how it looks. [16:46] And I really don't know why it now wants to run.

[16:51] outside the sandbox. [16:54] I don't think we need this right now. [17:03] Yeah. [17:04] And [17:05] Yeah. [17:10] So, [17:11] We see it gives us a walk through [17:15] and says, OK. [17:17] captured a visual screenshot. [17:20] And [17:21] One thing I'm not happy about [17:23] to be honest, because... [17:25] The extension works by-- [17:28] you actually click on the extension action. [17:31] to trigger the pop-up, which is what I asked. So it didn't [17:35] Specifically, test [17:37] this flow here. So I could say, okay, [17:39] uh [17:40] Test. [17:43] clicking the extension button. [17:45] I can-- [17:47] opens the [17:48] Pop-up. [17:56] Okay, we see, okay, now it actually did test the correct way [18:00] by clicking the extension icon. That hasn't been possible until like one month ago, [18:06] that-- [18:07] like... [18:08] Agents and other automation tools are able to actually trigger this functional piece. I'm super happy. [18:14] that this is finally-- [18:16] available. [18:17] So, but I think-- [18:19] our Hello World [18:21] Extension is done.

[18:23] And now we can actually build something [18:25] Cool. [18:26] So let me quickly-- [18:29] clean everything up. [18:31] So I'm going to be deleting all the files. [18:34] You're not gonna be needing them anymore. [18:37] And-- [18:38] I'll start. [18:39] in your chat. [18:41] So what I want to do now [18:42] is I want to build-- [18:45] a Chrome extension. [18:47] that shows [18:50] autocompletion [18:54] when [18:55] typing... [18:57] exclamation mark, exclamation mark, tap. [19:01] inside any [19:02] kind of text. [19:04] input fields. [19:07] and [19:08] What should happen then? It should show auto-completion [19:11] for any other [19:13] It should show all open tabs [19:17] And when... [19:19] Selecting one [19:21] It should... [19:23] insert the link. [19:24] because... [19:26] The thinking here is, like when I'm, for example... [19:29] writing an email and I want to include a link, [19:34] It's-- [19:34] the likelihood that I've got this link I want to include, that I've got it open [19:39] Somewhere in the tap is very high. [19:42] So, [19:43] instead of going to the tab, [19:45] copying the URL and pasting it, [19:47] I can simply directly add it [19:50] from within [19:51] of [19:52] my editor.

[19:54] Okay, so this is... [19:56] a slightly more complex [19:58] Uh... [19:59] Extension. [20:00] And-- [20:03] Let's see. [20:04] How about this here? [20:06] So it can-- [20:09] I think it's using the different skills. And again, it's implemented. [20:13] generating an implementation plan. And this time, [20:16] I'm going to be taking a look. And I think this is, for me, one of the best features of EnterCravity because I really love the way how they handle... [20:23] implementation plans. [20:26] because I can now-- [20:28] review what it wants to do. [20:30] And so here, okay, it's a manifest. [20:34] file, use the tabs permission here. [20:37] It's going to be generating icons. [20:40] uh... [20:41] Yeah, that sounds all good. [20:43] And [20:46] What you can do [20:48] is you can add comments in line if you want something to be changed. [20:51] So one thing I want to do [20:53] is kind of like when-- [20:55] So shift. [20:58] And so I'm going to press it together. [21:01] it should insert a markdown. [21:05] Link. [21:07] and use the tab title [21:11] as anchor tags. [21:17] Okay, so then we have... [21:19] PMS styles, I don't need premium CSS styles, I wanna

[21:24] Keep it simple. [21:27] Make it look like an IDE. [21:32] Okay. [21:33] It's going to create some documentation verifying it. So it's going to be manually verifying it. [21:37] That's not what I want to do. [21:39] Test it. [21:41] using [21:42] Chrome. [21:43] DevTools. [21:45] So-- [21:46] A review of the plan. [21:48] added some fruit pick and our king [21:50] Click "Proceed". [21:52] And it will actually start [21:54] building the extension. And that's the flow. [21:57] I think [21:58] that I... [22:00] really like. [22:02] because it's... [22:05] I find it a very natural way [22:07] to review a plan [22:10] before actually letting... [22:12] the coding agent build it. [22:14] Yeah. [22:17] So again, we see it working. [22:22] generating icons. Generating icons [22:25] was the first thing, by the way, that I added to the Chrome extension skill [22:30] because it turned out [22:31] Many coding agents. [22:33] struggled [22:35] Generating valid icons for extensions. [22:38] That was really interesting. Sometimes they would generate the files [22:42] But then. [22:43] declare different names in the manifest? [22:46] or they would [22:49] generate weird icons, like different resolutions would have completely different icons, so yeah.

[22:55] specifying some instructions how to handle icons definitely made [22:59] things much more robust here. [23:02] So [23:05] Again, we see, OK. [23:07] it's already analyzing the different MCP tools. [23:11] So-- [23:12] Let's see what it does. [23:14] Okay, so it actually built a test page. [23:19] so that it can actually [23:21] test the different scenarios. So we've got standard tax input fields, we've got tax areas and content adaptables. [23:27] Content editable field. [23:31] So these are actually the three main [23:34] Scenarios? [23:35] And-- [23:40] Some of the test server fit, okay. [23:57] Thank you. [24:08] Okay, now it's entered the text field. [24:11] And we see we've got... [24:13] Code completion already working. It pretty much does [24:17] what we wanted to do. [24:19] I have some questions around the transparent background. [24:23] But-- [24:24] And apart from that,

[24:26] I think that works. [24:28] Pretty work so well, so it can inject Markdown. [24:34] and [24:37] Yeah. [24:38] It... [24:39] works in all three different kinds [24:42] of input fields. [24:50] So, and I think it's done. [24:54] And I think that's pretty amazing. [24:56] So I think we've-- [24:57] Build a truly [24:59] useful Chrome extension, [25:02] with a single prompt. [25:03] And we can be pretty sure it works because [25:06] the coding agent actually was able to verify [25:09] this directly in Chrome. [25:12] I think it's actually so great I maybe could [25:15] publish it on the Chrome Map Store. [25:18] And that's another part of the skill. So that's about [25:22] prepare getting an extension ready for publishing it on the Chrome Web Store. [25:26] So what I'm going to be doing now is going to say, [25:30] prepare for [25:32] Publishing. [25:35] on the [25:36] Chrome. [25:37] Web Store. [25:39] Thank you. [25:42] So we see and reviewed [25:45] uh... [25:46] like basically part of the skill [25:49] is [25:52] Where was it? [25:56] Paracel skill is like a checklist.

[26:02] Where was it? [26:04] OK, I can't find any. Anyway, the skill includes a checklist like the coding agent should go through to make sure everything is ready and prepared. And the other thing is-- [26:15] it will create a chrome-webstore.md file. [26:19] And [26:21] That file [26:22] includes all the different information [26:25] that you need [26:26] if you want to publish an extension. So for the store listing, you need the name. [26:32] So it suggests one, a shorter script, [26:35] A more detailed description already suggests a category. There's only a fixed set of categories for Chrome extensions. [26:42] And there are different things that you need to specify, kind of like the single purpose. [26:46] of your extension, which is [26:49] One of the important things like-- [26:51] that you need to be aware of when publishing an extension. [26:55] It will suggest, it tells you which screenshots and icons you need. [27:00] It's [27:00] It doesn't generate them, like generate an icon, but not the screenshots. You could, for example, tell it, [27:06] to generate a screenshot. [27:08] And we'll do this using Chrome DevTools. [27:10] But I would then be really... [27:12] precise on when you want to [27:15] Take a screenshot. [27:17] But I make suggestions. [27:18] on how to do. Another really important thing [27:21] ... [27:22] permissions are really important thing for common extensions because they can be really powerful. So you have to explain... [27:28] for the Chrome Web Store reviewers, why are you using a specific extension?

[27:33] and again [27:34] It's [27:34] makes note of all the different [27:36] permissions that are used [27:38] And [27:39] proposes [27:41] justification for this. And I think this works [27:43] really well and really useful. [27:46] will fill out the data usage guide, it will generate a privacy policy, and add many more fields. [27:53] You 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... [28:01] uh... suggested once so i would strongly recommend reviewing this but i think it's a really [28:06] create starting point. [28:08] for publishing. [28:09] and extension. [28:11] And I said... [28:13] And I think, yeah, that kind of shows the whole flow from... [28:18] Uh, [28:19] having an idea for common extension, [28:21] building it, [28:23] and getting it ready [28:25] for publication on the Chrome Web Store. [28:28] Thank you. But I thought if we have a little bit more time, [28:37] we can make it even better. [28:38] And I think we have... [28:40] A few months. [28:41] 10 more minutes left. [28:43] That's great. So that's plenty of time. [28:45] for us to actually make this even cooler. [28:49] And [28:51] So one thing... [28:53] that [28:54] actually kind of like [28:56] A pet peeve of mine is like with this is [29:01] I have some texts here.

[29:03] So for example, let's say, [29:05] check out our new project. [29:08] And then I'm going to... [29:10] include a link. [29:11] to the [29:13] Modern Web Guidance Project. So I'm going to include this and I'm going to be using a Markdown link [29:19] It will use the title of the page. [29:21] And check out our new project, GitHub Google Chrome Modern Web Guidance GitHub.com. [29:26] not a really great anchor text. [29:29] And-- [29:31] I think we should make this better. [29:33] And the idea is... [29:35] to use Chrome's built-in [29:37] prompt API [29:39] to actually suggest a better anchor text name. [29:43] to inject here based on what's already [29:47] in the input field. [29:49] So let's see. [29:51] how well this [29:52] Doesn't work. So, uh... [29:56] OK, so first, how do we prompt this? We say-- [30:00] When inserting markdown, [30:03] Thank you. [30:04] Uh... [30:06] Use Chrome's... [30:08] prompt API... [30:10] to generate an [30:13] Anchor text. [30:15] Anchor. [30:17] Text. [30:18] that matches-- [30:20] the [30:23] previous [30:24] content. [30:26] content of the [30:28] input fields. [30:31] Actually, [30:31] Anchor Text. [30:33] Let's make it say like 3, 2,

[30:35] 10. [30:36] Roots, anchor text, their matches. [30:39] It's input field. Okay. [30:41] Let's go. [30:42] Thank you. [30:42] And this is the part we see it's already using the prompt API [30:47] uh... [30:48] guide [30:49] from Modern Web Guidance. [30:51] And... [30:53] The prompt API, the API has changed so much [30:57] of [30:58] the initial experimentation phase and then the origin trial. [31:02] that-- [31:04] In most cases, coding agents will get it wrong out of the box. [31:08] But with the skill, we have the latest [31:11] version of the API available. [31:13] And it's actually gotten [31:15] really [31:16] good at using Chrome's built-in. [31:19] APIs. [31:20] So-- [31:21] Let's see how this goes. [31:27] Okay, it has our... [31:29] Infopage. [31:34] What we see here, it's-- [31:35] checking the availability of the model, [31:39] inserting. [31:41] The link... [31:46] And that didn't... [31:48] look like it worked. [31:52] So... [31:53] But maybe it's actually-- so that's a really interesting thing. [31:56] Like when you're using [31:57] Chrome DevTools, MCP servers, [32:00] It's really interesting how coding agents use it. [32:03] Sometimes they will-- [32:05] They're really good at

[32:06] injecting scripts at runtime to access state, to trigger certain conditions, [32:12] And [32:14] And in general, like to debug [32:16] your extension in this case. [32:18] And... [32:20] Yeah, I think it's... [32:22] Super interesting to see and can be really [32:25] powerful. [32:26] So. [32:27] Okay, you see it's giving it another try. [32:30] But this actually looks good. [32:31] I don't hope [32:32] You can read it. [32:34] Uh... [32:35] It actually generated [32:38] a much better... [32:40] anchor text. So it said, by reading workshop setup guide for Chrome extensions. [32:45] It's definitely better what we [32:47] what we had before. [32:49] One next step would be to actually [32:52] Uh... [32:53] tell it to your [32:54] Show a loading indicator. [32:56] while it's using the prompt API. [32:58] to generate the [32:59] the link description. [33:01] I know this was maybe a little bit fast. [33:03] But I hope I've seen and... [33:07] Ideally, try it for yourself. [33:09] how easy it has become to build modern Chrome extensions [33:13] And how powerful... [33:15] It can be when you're coding [33:17] agent can actually [33:19] install and debug install [33:22] extensions and [33:24] actually debug them. [33:25] I think that's really... [33:27] a critical gap that has been closed and makes the whole development flow [33:32] so much easier. [33:33] and most importantly [33:36] What I hope that you've seen is that...

[33:38] Extensions are really powerful. You can shape the browser and the web to your needs. [33:45] And-- [33:47] Yeah. [33:47] It's so easy now to do this. [33:49] So I hope [33:51] You take this little bit of an inspiration approach, [33:54] to next time you face [33:56] something annoying on the web or the browser doesn't exactly do what you want, [34:01] Come on. [34:01] but an extension. [34:03] and improve your life a little bit. [34:06] Thanks a lot. [34:07] Thank you.