Full Tutorial | Building a Chrome Extension in Typescript and Vite

are you ready to use your coding skills to build something simple useful and fun that you can publish to the Chrome web store for anyone to use while this tutorial will show you how to build your very own Chrome extension we're going to be using Veet typescript and react and this is what we're going to be building this is a Chrome extension that you can click on in the top corner of your browser and it will open up this little pop-up this has a Color Picker in it and you can select a color and click this button and our extension will change the background color of the web page that you're on fairly simple but you'll learn a lot about Chrome extensions by building this now this video is going to be a step-by-step tutorial for building this Chrome extension and like all these tutorials on my channel we're going to take an iterative approach to building this so we're going to start small we're going to build the simplest Chrome extension possible we're going to load it up in our browser test it out and then go back to the code and add a bit more functionality then we can load that test it out and so on around this Loop each time the Chrome extension we build will get a little bit more complicated and you'll learn A New Concept each time we go around and this iterative approach is good for learning because there'll be lots of points in this tutorial where you have a working extension that you can play around with in your own browser you can use the chapters along the play bar of this video if you want to skip ahead to the next section and the chapters are going to look like this first we're just going to build a very basic Chrome extension that doesn't do anything and then we're going to add an icon and some other metadata next we're going to put a script in there that runs some JavaScript when the Chrome extension is clicked on and then we're going to add a basic pop-ups a little bit of UI and then lastly we're going to dive in and use Veet and typescripts to really build out the UI and the functionality of our Chrome extension before we get started writing code let me teach you a little bit about how Chrome extensions work Chrome extensions are built using JavaScript HTML and CSS so it's all the same stuff that you use to build websites and front-end web applications when you click on extension in the toolbar of chrome you often get a little pop-up that appears well that pop-up is your HTML file and just like the HTML web page the markup for that file can pull in CSS styles to control how it looks and it can run JavaScript in the context of that pop-up and what do you mean by context well this is the second thing that you need to know about Chrome extensions Chrome extensions run JavaScript and there's three different contexts your JavaScript can be run in and the context controls what functionality is available to that script and also what permissions you need to be allowed to run that script in the first place so the first context is the pop-up so if you have an HTML file for your Chrome extension pop-up then that has a script tag on it and that loads in some JavaScript then that JavaScript will be executed in the context of that pop-up if you try to access the Dom in that JavaScript it's then the document object you get back will be the Dom of the UI for that pop-up so not the web page that the user is on but the web page that's in the little pop-up View so if I have some JavaScript that changes the background color of a page and if I run that in my pop-up then it will change the background color of the pop-up so that's the first context the second context is the service worker a service worker is a Javascript file that sits outside the context of the pays that you're visiting and it lets you respond to events and intercept Network quests and that sort of thing you can think of a service worker a bit like a background process to your web application it sits in its own context in the background running code that's attached from the UI service workers are not exclusively a Chrome extension thing all web pages can have service workers and in Chrome extensions the service worker makes up the second separated context or execution environment of your JavaScript lastly the third context is the page that the user is looking at so using a Chrome extension it is possible to execute JavaScript in the context of whatever web page you've got open at the time and in a Chrome extension line these are called content scripts so when a Content script accesses the Dom it's reading the actual page that the user is browsing at the time so if you change the background color of a body node in a Content script that will actually change the background color of the web page in the browser and not the pop-up UI like it was before when you defined your Chrome extension you can specify which websites you want to run content scripts on and the user that installs your Chrome extension they can see those sites and they can grant your extension permission to run those content Scripts right that's how Chrome extensions execute JavaScript let's just look quickly how you can load up a Chrome extension that you've built for testing purposes yourself so if you click on the jigsaw piece in Chrome like this and go to manage extensions that will take you to this chrome slash extensions page here and this is where you can manage all of your Chrome extensions in one place this extensions page also gives us the option to load a Chrome extension that we've developed locally on our machine so if you use this button here called load unpacked this button lets you select a folder from your machine that contains the code for a Chrome extension and then load it up in your browser for testing now you'll be doing this at multiple points in this tutorial so I want you to be familiar with that first off before we go any further okay now let's start building the Chrome extension so dive into Visual Studio code and open up a new empty folder in the explore window and let's get started okay so the first step is to just create a manifest file and we're going to use that to create a very very basic Bare Bones Chrome extension in Google Chrome just to see what the Manifest file does so if I go in here and create a new file called manifest.json and then if you go on see internet this is called the Manifest file format page I'll put a link in the description and this tells you the schema of that manifest file in Google so you can see that the Manifest file's got a bunch of stuff you can put in it but there's actually only three properties that are required so if we add these three properties into our manifest file then we've got everything we need to create the basic most simple Chrome extension possible so go back into visual studio and we're going to put into this manifest file we're going to put the version version three the name of it I call it my extension and the version of the extension so this is 1.0.8 now that's actually all that we need if we go back into Chrome and go into our extensions page and do load unpacked and I'm just going to select that folder that my manifest file is in and then you can see it's actually created the extension so this my extension here this is from my manifest file that version number is again from my manifest file and if I open up the jigsaw pieces here you can see that my extension is in the list of extensions that are installed so it's actually created a Chrome extension for us there um just using these three lines of code in the Manifest file so that's the first iteration there you go you can have your very own Chrome extension just with three lines of code not very exciting doesn't really do anything so let's iterate on this again and put some more stuff into it if I look in this manifest file format schema you can see we've got this icons property so this icons property if I click on that this is going to tell us how to add an icon into our Chrome extension manifest file so we add an icons node and then we put in Keys into that Json object each one says where you can find the icon for that size we don't need all of these they're all optional so if I just go into here and I'll create the icon PNG here so I've got icon32.png that's just a little train to code icon now if I go into the Manifest file and add in an icons node and I'll just say the 32 pixel version is called icon32.png so save that go back into the Chrome extensions tab in Google and if I click this little refresh button here that's going to reload the Chrome extension from the Manifest file so if I do that and open up my extensions you can see that my extension now has this icon onto it so now I've got a Chrome extension with a name a version number and an icon that came from the local folder that the Manifest file is in great now let's add some action functionality to this so remember we talked about the three types of context that Chrome extensions can have they can have scripts that run inside the pop-up they can have content scripts that run on the page and they can have background scripts they're just running their own separate context and respond to events so I think the simplest scripts to put in here will be a background script so if I go into my manifest file and add a new node in here called background and I'll say I've got a service worker and it's going to be called serviceworker.js and that's going to be a type module so uh if I go and actually create that serviceworker.js so I'll create a new file and it's going to be called service dashworker.js and in there we can use the Chrome API now this is the first time we've been using the Chrome API and it's essentially a set of functions that you can call from inside one of the Chrome contexts and the way we do that is we call Chrome and then dot action then dot on clicked and then we're going to add an event listener to this so that means that when we click our Chrome extension in the little jigsaw tab that's going to fire this event listener here and it's going to pass in an instance of the tab that they currently had open so in here we're going to do some more Chrome stuff we're going to call Chrome dot scripting I'm going to execute a script so again this chrome dot scripting we can say what tab we want to execute it on so we're passing the ID of the tab that we had and there's a number of ways you can execute a script you can pass in a file to a Javascript file but what we're going to do is put it in line so we'll put in the funk property into here and we're just going to say so an alert that says hello from my extension cool so now I've got an event listener that listens to the on collect event so when you click the extension and inside that is going to do some Chrome scripting and it's going to execute a script in the context of this tab that says hello from my extension so if we go back to the Manifest files a couple of things we need to do the first thing we need to do is enable this actions API here if we did this now it would say that we don't know what Chrome action is so you need to go into manifest file and add a new file in here a new node in here called action and we can leave it empty for now but that basically allows us to use that chrome.action API the other thing we need is we're going to need a permission to run the script if you look in this service worker this is using the Chrome dot scripting API which is some functionality that Chrome extensions give you that can execute scripts and that needs special permissions so we're going to need to go back into the Manifest file and add in a permissions node so this will be an array and we're going to put an array and we're going to put in an item of scripting so that's saying our Chrome extension needs the permission to be able to execute Scripts we also need a node called host permissions host permissions is going to say these are the hosts or these are the URLs that our scripts can run on so if we just put HTTP and https like this then we can say that our scripts can run on any URL when it's open in Chrome so that should be enough to now run our background service worker so if we go back into the extensions Tab and I'm just going to click this reload icon here there's a problem with that I think I've missed out comma one second [Music] I have Mr comma up here there we go cool so I'm gonna click this reload button did you see it gave us an error though it's actually quite useful to have the error album really I sort of skipped over that but anyway so a quick reload that's reloaded it and you can see now we've got this service worker in here you can actually click on this service worker and you can get Dev tools for the service worker itself so if the service worker crashes or if you do any console logging you can see it by clicking the service worker in the extensions tab so that's quite nice and then what we can do is let's just go to a web page so we go to example.com which isn't a real web page but it's at least loads up in Chrome add an example.com we can open our extensions Tab and actually click on my extension and what that will do is it will fire that on clicked event handler and it will show an alert hello for my extension so this alert has happened because we clicked extension and it's done that execute script using the Chrome scripting API and it's shown that alert on this page here example.com so that's the second iteration of our Chrome extension we've got an icon we've got some metadata in there and we've got a script that executes when you click on it we can do this again if you want just to show you there you go hello from my extension cool right the next iteration of this is we're going to actually add a pop-up at the minute when we click on our Chrome extension it just runs some scripts but wouldn't it be nice if we actually showed like a little pop-up window to the user there so the way we can do that is let's first actually just take out everything from our service worker because we're not going to need that again and I'm going to create a new file called index.html and this HTML file is going to be the HTML that's shown inside the Chrome pop-up window and the way you can just boilerplate an HTML file in Visual Studio code is type exclamation mark and then enter and that will give us the basics of an HTML file so we can go ahead and give it a better name so we change this document to be extension title and then we're just going to put like a tag in here that just says hello cool so we've got an HTML file that's going to show as a pop-up then what we need to do is go into the Manifest file and tell the Manifest about that so in this actions object we'll say default pop-up is index.html so this actions object was blank before but now we've added in this default pop-up node that points to our index.html and all these files by the way are just in the root of our project here so we've got the icon the HTML file and the service worker and the Manifest so that should be enough to then show our HTML file as a pop-up so we go back into extensions and we click the reload on here reloaded and then we'll go back to example.com and now when I click this it will show us a pop-up there we go just says hello so that pop-up is coming from the HTML file that we've called index.html so that's quite nice each time you click on it it will open it up there we go cool so this index.html file at the minute it just has a header tag in it but I want to show you that you can actually put scripts and things inside that so what we're going to do is let's open up the index file and in here I'm just going to add a button call it my button and I say click me and then we're going to add a scripts tag you can't actually put inline scripts inside HTML pop-ups but you can load in script files and they'll run in the context of the pop-up so if I do a script tag in it here and just say index.js and I need to create that index.js script file so I'll just create a new file called index.js and in here we're going to put a function so let's just create a function that says function say hello and what that'll do is it will need to find we're going to have to call another Chrome API here we're gonna have to call chrome.tabs so if I do a new tab and then do await chrome.tabs.query and pass in active.true so what that's going to do is it's going to query the active tabs in your Chrome browser window and it's going to pull out the tab that's currently active so when we're browsing on example.com that'll be the tab that's got example.com in it then we can call the scripts kpi again so we call Chrome dot scripting.execute script and the target for this script will be that tab so we're going to pass in the tab ID of the target tab that we got from the active tabs and then just like before we'll just put a function in here that does hello from my extension finish this up and then when this script file is loaded up we're going to do some Dom stuff in it here we're just going to say document.getelementbyid my button add event listener click say hello so if you remember from before when we do document inside a index.html pop-up that document is going to be the document of this here so it's going to give us this Dom so what we're saying inside index.js is load up this Dom and find the button with ID my button and add a click event handler onto it the um handles the click me event and when it does that it's going to execute this function called say hello so let's uh load this back up in Chrome go to extensions Tab and just click reload now when we go to example domain and open up our Chrome extension you can see I've got this button on here so that's the button inside the Chrome extension we're going to click on that and it's going to execute that JavaScript which is going to say hello for my extension but this time the script has come from the index.html pop-up so that's quite a good Chrome extension so far this is a Chrome extension that's got a pop-up it's got some metadata and it's got a little button that just runs some script on the active tab if I had a different tab active so if I went to a different web page then it will run this script in the context of that web page and where we've just got alert here we can actually access the Dom so if we wanted to do Dom inside here with the document dot body then inside this function this document node would point to the document node of the page that you're on so document.body here wouldn't be the same as this document it would be the body of let's say we're on example.com it'll be the body of this page so that's kind of cool that lets you like inject stuff into the actual page that the user is browsing that's that third context that we spoke about earlier cool okay so here we have a very simple Chrome extension it's got a pop-up that shows this index HTML page and it also has a Javascript file that's loaded by the index.html page pop-up when the pop-up is opened the JavaScript is executing some code in the context of the active tab we also have the Manifest file that defines the properties of the Chrome extension so this is great and it works but as you build out your Chrome extension you might find that you end up with many many many of these scripts and these files and perhaps different HTML templates as well and eventually this kind of code can get a bit messy and it can become a bit unmanageable especially during development so next I'm going to show you how to recreate this same Chrome extension but using Veet and typescript and react Veet is a fun and build tool that makes it super easy to develop and test web applications locally and typescript is just generally all round good for Rapid stereoscope development because it gives you static type checking and it's just generally much nicer and more user-friendly than working in JavaScript so to create this Chrome extension in V we just go into the terminal in a new directory and create a new Vita application with npm create Veet at latest and then we could do npm one Dev here and then so if I open up this localhost file here it's localized URL then you can see this is our V application and this is just a standard V application that comes when we do npm1 create Veet at latest so we cancel that and then we're also going to do an npm run build so when you are ready to put your V application into production you run npm1 build and the build script will bundle everything up and it'll create you an output folder so this output file is called dis and when we create our Chrome extension it's this dist folder here that we're going to be putting into Google Chrome as that extensions folder so when we do load unpacked it's going to be this disk folder that we load unpacked so let's go into Visual Studio code right so in here we have the code for a new Vita application that was created for us and if you see here that's the disk folder so this disk folder is the one that we're going to add into Google Chrome and this is going to be our Chrome extension so at the minute the disk folder has just got an index HTML file and it's got an image in it we can recreate this disk folder at any time by going back into the terminal and just doing npm run build so as we're adding stuff into this V application we'll be doing npm one build we'll be creating that this folder and then we'll be loading that into Google Chrome so there's a bunch of stuff in here that isn't particularly useful for us right now but the first thing we're going to do is we're going to create a manifest Json so if you remember you need a manifest Json for every Chrome extension that's the one file that you absolutely need so if we go into this public folder here in V anything inside this special public folder will just be copied straight to the dist folder so this veets.svg that it came with that's being copied into this vs GG into the disk folder here so in this public folder this is where we're going to be adding our manifest Json file so we go into there and we'll create a new Json file called manifest Json and we'll say manifest version 3 again and the version of my Chrome extension is going to be 1.8.0 and the name will be my VTE extension so if I go in here and do npm1 build then building this is going to copy that manifest Json file just as it is into the dist folder so now we've got manifest Json in the dist folder and that's now enough to load up this Vita application as a Chrome extension using this manifest file so if we go back into the extensions tab we'll remove our previous extension and we do load unpacked and we're going to navigate to that dist folder and I'm going to select the dist folder as my Chrome extension and you can see now it's extension loaded and it's called My Veet extension we can open up the jigsaw and we should see that the VTE extension is in here as my VTE extension so we've actually got an extension Now using Veet doesn't do anything but again we'll get on to that in the next iteration so if we go into this manifest file and we give it a pop-up we're going to say action default pop-up is going to be index.html now that index.html is going to point to the HTML file that V creates for us and puts in our dist folder so that's all very good we're also going to need the scripting permissions like before and we're going to need the permissions to do the host so this means that you can run content scripts on any URL when you do this in real like for production you probably want to put real URLs in here because the extension that we're building today can work on any URL but you probably will be wanting to build extensions that only work on certain pages and your users might be a little bit alarmed if they install the Chrome extension that can change any web page they visit but I'm just doing this for demos purposes because it's easier Let's uh put our icon back in here as well so icon 32 is going to be in there so if I put icon 32 into this public folder then when we do an NPR V npm1 build it will copy the icon and the Manifest into the dist folder so we can try now actually let's do npm one build and as that finishes you'll see the icon appear in this disk folder there we go then we can go back into the Chrome extensions tab reload it uh okay I've got an error because there is a comma missing there we go reload that still not right because ah yes okay so this is one thing to know whereas previously I was just changing the Manifest and then reloading it in Chrome now because it's in this public folder I need to change the Manifest save it and then run npm run build to copy the saved version of that manifested to the output so if I do that the Manifest in the output should now have that comma I just added it back in we can go into extensions Tab and we can reload this and the Vita extension should now have that icon on it my VTE extension with the trains code icon we can open this up and you can see it opens a pop-up that's got the Veet app inside it this is running exactly the same way that it was running in this tab here this one this was running locally on localhost and this one is running inside a Chrome extension there we go so it's the same route application but we've bundled it inside that pop-up window we've basically told the Chrome extension to use the output of the V bundle as its pop-up window so that's kind of cool so let's uh make this actually do something then so if we go into Source app.tsx this is the main application and we'll change the title here to just be my extension save that and what we can do is we can replace what happens when you click this button the default Vita application just sort of increments a counter that's not very exciting so if I go in here and I change this set count to be an on click function and then I need to go and create the enclip function I'll just say click me and create the on click function up here inside our app component and the on click function is going to do a similar thing as we were doing before where it alerts something on the page so inside that on click we're going to call the Chrome API so we're going to let the tab equals Chrome dot tabs Dot active true now typescript doesn't actually recognize this because the Chrome API is a kind of extra package now you can access it but typescript just doesn't know about it so in order to make typescript know about this we need to go back into the console and we need to install a package called types forward slash Chrome so that's going to tell typescript about the Chrome API so if you do that then next time we build this Vita application we should have removed the warning about types Chrome so if we wait a little second there we go so that disappears so that now knows about this chrome API and we can have autocomplete on tabs and query and everything like that and this is another reason why typescript's awesome and why the support for typescript is growing every time so let's go into here and we'll do another thing we'll do Chrome dot scripting and execute script and just like we were doing before we're passing the target of the tab ID um we'll say there's gonna be a function in here this guy's just showing alert pop-up saying hello from my extension cool now let's just uh delete that unused import at the top here and then we can build this so we go into the console and we'll do npm one build again and then when we load it up in Google Chrome so I'll reload the extension here go into any web page and open up our Chrome extension now when I click this click me button it will fire that script and it will fire and say hello from my extension like it was doing in the previous iteration so that's happening from that on click Handler that we put inside the app.tsx component great now let's make it do something a little bit more exciting than just saying hello let's make it actually change the background color of the page so in order to do that we're going to need to uh do document dot body dot style and then background color and we'll just set that to Red for now so if I just build that what that's going to do is this document node here this is going to be the document node of the tab that they're currently on so if we go to example.com that'll be the document node of example.com once that's built which I think it has once that's built we can go into the extensions Tab and reload it and now when I click this button it should change the background color of the page to Red let's try it out there we go so that's changed the background color to Red so we're getting there this is good we're interacting with the Dom of the example tab for my right Chrome extension cool so now we want to do is make it so they can actually pick the background color using a little color pop-up so let's uh create a color constant in here and we're just going to do use States and we're going to store the color into a state file we'll just import you stay at the top and I'm going to create an HTML input here type is color there so I've created an input where the type is color that's the built-in HTML5 Color Picker and then when you change that it's going to call the set color function which is uh in our you state at the top here and it's going to set the color to the carbon color that you'd selected and the value is going to be the current value from our state okay and the only thing we need to do now is where we're setting background color to Red we need to set background color to the color that's in our state now this isn't as simple as it might seem at first there's actually going to be a little bit of complexity where we have to switch context here so let me explain what's going to go on here if we uh replace this with color that's not going to work the reason that's not going to work is because this function is executing inside the context of the tab that they're currently on and the rest of this code is executing in the context of the pop-up so where we're doing this color variable here that variable is being stored inside the code inside the pop-up and this document is happening inside the page and so you can't access variables from the component inside the Dom so what we're going to have to do is we're going to have to pass in this color variable when we're doing execute script so the way you can do that is we can use this args function here so we're going to pass in this color variable into the args of our script now typescript doesn't know about this args because it needs to be strongly tied so the way we can do that in typescript is we'll just tell it about it by putting some generic type parameters in here so we'll say that we're going to be using a string array so our arguments function is going to be a string array and then it can be whatever so our string is just going to be the color and then that should be enough to go into here and set the color so the function color will coming in here and that will be that color that gets passed in here so there we have it let's uh build this and try it out so I'll do an npm run build and just wait for that to build and this should create the Color Picker on the screen it should execute the script it should pass that color variable through to the context of the page and then we'll see what happens let's go refresh this so it goes back to being normal color reload or Chrome extension go to example.com open up our Chrome extension and you'll see that we have this Color Picker now so if I select a color on this Color Picker Let's uh let's select a nice blue sort of Bluey purple when I do this click me it's going to take that color which is the bluey purple and it's going to pass it through that execute script as an argument and it's going to set it in the background color on the page there we go it's blue let's just make this another color let's make this green and again each time we do this we're setting the color variable in our state inside our react component and then we're passing it through to the background color of the page so there we go we've got a Chrome extension that lets you change the background color of any page that you're on so let's just try it on different page Zone if I go to train to code.com and so should you the background color of my page now is this kind of light gray color so if I open up my Chrome extension my VTE extension and let's say I want the background color of this page to be a sort of fuchsia color when I do click me you can see it's changing the background color of train to code.com so you can do it on any web page you want basically it will inject the script and it will pass the background color through and it will run it on the active tab which in this case is train to cone.com and in this case it was example.com this has been a quick tutorial on building Chrome extensions but if you want to go deeper into V then check out my V course which is linked in the description below and why not watch this next video about how to run typescript in vs code including how to get the debugger working which is something that I know you'll find extremely useful so until next time my name is James Charles and this is train to code on YouTube [Music]

Channel: Train To Code

Views: 14,923

Keywords:

Id: GGi7Brsf7js

Length: 32min 57sec (1977 seconds)

Published: Fri Aug 18 2023