Tutorial: Chrome Extension Starter Template With Vite React TypeScript and Tailwind CSS

Key Takeaways

hey everyone in this video I'm going to show you how to install and use the Chrome extension template I just finished making template includes Vite react typescript and tellin CSS and it also includes the Chrome API typescript package called Chrome types for a smooth autoc completion one great thing about this template is that it allows you to view your options page and your popup directly on your Local Host with hot reload so you don't have to reload your extension just to view the changes you made to the UI this video is going to include three steps first we will install the repo locally second we will upload our extension to Chrome and lastly we will make some changes to our files you can follow along and copy all the commands I'm showing directly from the readme file on the gab repo from the link in the description let's get started by cloning the repository navigate to the folder where you want to install the project and run the following G clone command you should change git project to your own project name I will change it to Chrome extension one and hit enter great we have cloned the repo now let's get inside our project by running CD and the project name now let's run npn install to install all of the required dependencies and now that we have the dependencies we we can execute npm runev and here you can see a preview of your extension UI you can view both your popup and your options page with hot reload all right we finished the installation now let's try and upload our extension to Chrome let's go back to the terminal and run npm run build it will create for us a this folder with all the files needed for our extension next let's open our Chrome browser and go inside this URL enable developer mode click load on packed navigate to your project and select the disc folder we created and there you have it our extension is live and running here is our popup and and here is our options page now that we see everything is working we can start developing our extension let's start by making changes to our popup and options page to make changes to our popup let's go on Source Chrome extensions popup index. DSX for example I will change the text here to extension one and we can immediately see the changes on our local server let's try and do the same for our options page let's let's go on Source Chrome extensions options index. TSX let's also change the text here to extension one and we can immediately see the changes on our local server as well now remember and this is important every time you make changes to your files you're going to have to run n PM run build again for Vite to rebuild the disc folder so let's do that let's go to our terminal and run npm run build now we can go back to Chrome and click Refresh on our extension and there you go the changes we made to the extension are implemented all right now let's see how we can add a background script to our extension let's create a background. TS file in the source directory of our project now let's add a random console.log and now we need to do two things first we need to tell VD to include the file in our build project we do so by going to v. config and add the following line under build roll out options input the second thing we need to do is to point to our background file in our manifest.json file so let's let's open the manifest.json file and add the following lines okay now we can run NP and run build again and if we look in our disc folder we can see we now have a background. Javascript file let's once again go on Chrome and refresh the extension you should now see a Blue Link saying service worker click it and you should be able to see the console.log statement we created in our background file and this is it for this tutorial this template should give you a strong starting point to develop your extension I plan to keep improving it and adding more features to it as I go the best place to let me know of any bugs issues or feature requests is under the issues tab on the gab Brio and if if you're already there if you could please give it a star thank you