Create a Chrome Extension with Vite + Vue

oh that's amazing welcome back to another episode of alvaro devlaps greetings from sony barcelona yeah no just kidding it's not sunny at the moment it's like eight at night and i just wanted to put my glasses on today we are gonna build together a chrome extension using beat and view yes as you heard it it's going to be legendary let's start by creating a new project using yarn create bead this is basically going to install a fresh uh vid application um it's going to ask you for a name so awesome extension let's put it in lowercase we're going to select view um in the moment with our typescript so this should create it anyway let's open in code so it's awesome extension no i don't trust myself let's put this a little bit bigger okay here we go so let's open the terminal here because we need to install the dependencies [Music] basically we're going to use vit and view to create a promise tension this is pretty cool i learned it like last week i never have done a chrome station before i didn't know how it's composed uh how you do the pop-up and so on so i needed to learn it but it's pretty easy to be honest so before continue i eliminate uh the hello world component that is here and for the structure of chrome extension you need to create a folder that is called content scripts in that folder you are going to move the main one the app that you you don't need it actually here the the main years and we are going to create something called pop up w we're gonna leave it empty by now some warnings but yeah at source level we need to create also a manifest the jason this is the the file i was referring for and this is the one that um the chrome extension used for all the metadata applications like icons and those skeletons also we need a service worker so we're going to create a background dot yes so we need to fill this uh manifest.json with all the proper stuff so the name let's call it the awesome extension uh the version of the manifest is uh version 3. we're going to use the version the new version of it um also we need to set up the version of the plugin itself or the extension so um i'm going to use some version and just put it there 1.0 1.0.0 then yeah probably this needs to be a string a little so we need to define several things here um one of them is the icons so something like this we don't have any yet and we need to create them but it's like normally it's a 16 one and we need to put them in assets so here we need to create some um versions of the logo of our extension in different sizes like 16 then it's going to be 24 i think then uh 48 now 24 is not is 48 and 128 so for the icons i quickly create three frames 128 48 and 16 in figma and i just sporting them in the asset folder here um so it should be right here so we can complete this and say okay assets uh icon 16 png and just copy this one by the way i don't know why my autopilot is not working let me check real quick okay for some reason i have not installed it here in this computer um this is an excellent tool i've been using it uh for a while it's really amazing um the ai is really intelligent and help you leverage a lot of work especially in thai script which i'm really bad at it has helped me a lot to to improve so maybe i will do a video regarding a copilot let me know in the comments if you would like to have one um let's continue with it and let me get my in minus we call it chileta when you have like a paper just assigned with the notes that you need to comment on the video for example or in a in a test in the university you had a little thing with the formulas kind of thing i i never use it so uh i'm going to just put here um the background okay so here we are saying that we are going to have a file that works as a service worker later on i will explain why so this one is the background.ds that we created and also something called content scripts okay and in content script is going to be uh an array and you can see now that that actually co-pilot is giving me some like hints of things that i should put and actually this is exactly what i need to put here um so he already knows that i'm creating chrome extension and this are the files that i need for this one is not content though is uh content scripts and we're going to use the main.js as a main file for the view application uh what else i don't know we need anything else um in another project i do have this so maybe it's needed i really don't know but i'm going to put like awesome extension here and then we have the the manifest build up so before we continue i think it's really important to explain how a chrome extension work or at least the one we are going to build today so a basic chrome extension contains a manifest that is holding all the metadata for our application then we have a pop-up that is just html uh the pop-up is actually this whenever you click the icon of the extension you get like this nice pop-up with whatever the extension does inside um this is what we are going to build in view actually would be it and then you have a background or a service broker so this script what is going to do is basically communicate between the pop-up and the chrome api if you need to get anything from the browser api is going to be here in the background we need to set up a way for those to communicate to send data from one place to another here i have the example of the one that i built last week and this is what we need to achieve we need a list with the assets mainly the items we need in the list a main gs with the css for example we need the background yes and we need the manifestation this is going to be the package that we are going to get into chrome to to have extension so in order to do that here in our application we need to install uh several things like right now we only have it plug-in view and the compiler and maybe that's about it um for the styling i'm going to use tailwind so we need to install it also i'm basically going to copy and paste the extensions that we need here uh you can install them manually or you can just copy and paste it in the beginning and then just uh use yarn to install it from from scratch after copying and pasting all the dependencies that i use um i'm not just playing just for the surface uh i'm going to use my printer configuration that i uh built for myself so i quantified for icons also we have autoprefixer plus css and tailwind in order to work and i'm going to use some plugins for bit uh plugin components that allows you to out import them and beat plugin icons that allows you to use iconify and create like view icons easy to svgs okay so we need to install another one um so i'm going to use yarn add and it's called vid plugin chrome extension if we search for it on the browser here is this one by a star channel stark shine i don't know if i i say it correctly but this is this one so it's basically like a fork from the roller plugging chrome extension to be able to use in bit and we only need to um import it and then in the define config put it as a plugin so let's go to here and we're going to copy and use it here so yeah i guess we need to use it like this okay i'm going to also copy and paste some of the configuration of the bit uh config just basic stuff that i use the most like alice's for example that they go to source also for the build we will need the following configuration um this is for the roll-up option so the input is going to be the source manifest.json okay and in the plugins just before the chrome extension one we are going to copy and paste these ones so one is the vid components uh basically it's going to take all the view uh extensions and also they have a custom component resolver for the icons okay this is just to use the icons itself so i'm going to copy here and that should be basically it okay then we will need to install uh or start uh tailwind so npa npx tailwind css init dot p this is going to create a plus css config and a tailwind config it's important here in the table wing conflict that we actually put to purge every view here because um we we want the chrome extension to be as lighter as possible in the bundle so it's important that we purge uh all the classes here um also probably we will need a folder here inside um source is going to be style and just main css kind of thing here uh i never remember how is this one it's just tailwind-based stopping components and telling you this probably here inside content scripts in the main we we don't need this one um [Music] i'm going to copy and paste what we actually need because i'm too lazy today i'm going to explain so this is going to be awesome extension here like the the iv of the application and we are going to not use an app.view to mount we are going to mount it as this let me just take out the typescript stuff because this one is not with high screw okay um just playing a little bit so it's going to take the pop-up which is uh this file and it's going to append it to the document body um just with a with a div and then okay this is important this is like communicating with the chrome runtime and whenever he gets a message from the extension when you click it um if the toggle is visible we need to create this logic also in the service worker but essentially what it's going to do is that whenever you click it it's going to make the pop-up visible or not i'm going to elaborate a little bit better afterwards so let's save all of this it should be fine and we're going to start creating the view components so i have a view snippet with the structure i am going to import a defined component which i think is more uh used in typescript when you use typescript review but because i'm really used to use it i'm just going to put it here okay so here we need to put a semicolon um what else in the template we are building now uh basically a pop-up or an overlay so let's create the first div with the overlay okay and inside of it we are going to put the pop-up itself um let's put something on h1 that says wait for it dairy and so we need a variable here to tell to the overlap is visible or not depending on the action of the service worker so we are going to instead of the define component uh use the setup here and we are going to create a constant visible equal uh a graph as it's going to be false at the beginning we will need to return it of course to the template like this should be fine and okay this one needs to be the same as we put in the media so i'm going to put main yes just aside and you see here that we are going to access the instance of the pop-up and just to go the visible depending on the message that we get from the service worker so that should be fine with this we should put like have an overlay um let's put some styles on it so i'm using tailwind you can directly put the classes here but i'm getting used to doing it here actually so i'm going to use overlay and say that i want uh to apply and you see that i actually the the github compiler that already told me like okay it's an overlap i'll put it and fix it so we're going to use fix it um it still doesn't work with tailwind i don't know why it's not telling me things about tailwind yet but i guess this is going to learn so um insert zero maybe hide full and we want to put it like a background which is a black okay and a background opacity of 10 maybe let's see if with that we're covering then we need some styles for our pop-up um so apply a background that is white for now i'm going to put a shallow on it um b4 for padding so p4 is actually like 1m uh rounded and i don't know if you put it a width though um yeah let's try with some number how will be 72 okay that should be it next thing to do is actually coding in the background logic to make the pop-up visible so um here is where we're going to access chrome directly and are going to add an event listener here to the action click or what is it called on click okay and it's not ready to tell me like this completion so here we we are going to receive a parameter and i'm going to use an arrow function here okay that returns the the current tab that you were working on um so if that tab has an id we're going to send a message so chrome tabs uh it's not a it's an execute now a send message with the tab iv and we want to uh pass in that message to go visible okay and we're going to say um well actually yeah to go visible true okay so with this we are going to listen whenever we click the icon on the browser where where the extensions are and whenever you click it you are going to send a message to the main yes to put that pop-up visible before continuing and actually building and testing in chrome to see if we see something we need to give permissions to the to the actual extension to use um the tabs so here just below uh copilot again okay almost so you need to give a affirmation of tabs okay i think that will be it let's try to build it um regarding that also there is two ways to do it and you can also put here in the package.json instead of dev which will be a normal bit application in this case is not something that we are going to serve here so i'm going to copy and paste the one from the other break and it's actually building in the mode of development in case you want to check something in the scripts something like that that is not minimized so let's um you step you're deaf it's complaining about something cannot find module beat chrome extension did i install it i don't remember let's install it again and that's it i don't remember if i installed it though i think i didn't okay so now it should be here um you're deaf okay we have another error resolve is not defined the solve is not defined and this is in the v config oh okay let me check huh yeah i forgot to import this um so we're using resolve from the pad actually this is pad resolve this is my bad i'm sorry continue with life come on maybe i didn't call it yeah this is a problem of copy pasting uh fellas like you shouldn't rely on it you should do things from scratch it's just in this case i call it mangias instead of industry yes okay this is getting painful because it's a style of come on okay i think uh it seems like right now it is working though um let's just wait until we finish [Music] it's funny how is it this slow down oh my god this is a bunch of css so what's wrong you can put it in the tailwind css to remove this well how i will check it out later maybe it's because it's the dev one what happens if i do the the normal build probably this is going to be less well okay so how we do so how we test this um we need to go to chrome and go to chrome extensions here and i have the developer mode on so to do to be able to use your local extension and on having to upload it to chrome in order to install it you need to set uh to put on the developer mode and here you have the option of load unpacked okay what we are going to load is actually the this folder of this application so we're going to go here and i have it under github awesome extension and if everything went well we will have this structure that i mentioned before like the background yes um i don't know what the publicans here but manifest jason content scripts with a pop-up in the main so that should be and bam here we have our extension with our logo just before continuing i just realized we have two errors on our pop-up one is that ref is not fine and that we actually not uh to doing the the pop-up so here is we're going to use bishop and bring it with visible and then we are going to build it again so this is this is fine i mean um this will help me to to teach you how to continue working on it so as soon as you build it here you just need to put here update and it will take again this folder and load it again here so you don't need to load them back all over again you can just click here so now it should work let's go for example to beat home and if we click there we have our pop-up really bad position it but we have our pop-up so okay terminal goes in the way here awesome extension perfect so we need to cover pair of things for example putting the correct sata index and maybe the pop-up we need to put it in a better position so we're going to use absolute and i'm just guessing like a top four and a right four for example and also i didn't even like how big legend there wait for it she's ah it's okay it's just for demo purposes so let's build it again [Music] so we go to extension and we need to refresh the tab that we were in okay and then let's click it again and now it's in a better position so this allows us to create that pop-up that comes away let's add some more cool stuff like actually getting information for example from the tab we are in like what is the url some information about the tab how we're going to do that so now let's do something useful with it and let's access for example the current tab data and show it in the pop-up in order to do that we need to set between the pop-up and the background service some kind of uh messages just like the message that we send whenever uh we got the action click and we send it into the pop-up to be visible we will need to do something similar for the other way around so um the logic will be the following we are in the pop-up and whenever it's mount we are going to send to the background the message is saying hey the pop-up has been initialized please get the current tab data and send it back to me to present it in the html or in the pop-up so let's do that um we need then the pop-up here um let's go here and [Music] let's import on mount first do not forget and unmount we're going to use chrome wrong time send message and here in the send message you also have a response to it so in the response we are going to return the tap information so it will be good if here we have like something like current tab as a ref of well reactive maybe and we set current tab equals tab okay uh which is going to be the message so here we need to feel like what's the type of message so the type of message is a pop-up in it for example and now we go to the background yes i'm going to put the background yes just here and we need to listen to that so the way of listening is let me get my letter background so it's actually the same as chrome runtime on message as the listener okay we have the structure here thank you copilot you're very helpful so we need to i mean you don't need to use a switch in this case but this is like the recommended structure for this because then you can have several cases and depending on the type of the message you don't need to create several um like adding several event listeners you only need to put one so in this case we are going to check the message which is the first one the request so the request type and in case this is pop-up in it we need to do an asynchronous operation here get current tab okay and then response then response and just below that return true to say hey we're returning a synchronous operation here we don't have yet get current tab so this is going to be a new function that um i also have much light here with so it's an asynchronous function called get current tab okay so the interface to get the the tab information is chrome tabs query at least in the manifest um tree before it was different so we need to pass the query options which is normally these ones and you're gonna get like here okay so we're going this is an asynchronous operation we are just going to get the first step of the current tab like this okay and we can do several things with the tab but for now let's just return it so basically whenever we are mounted um we are going to pass or we are going to send this message a call we type pop-up init we are going to listen it here in the background the service worker and we are going to return it um so in the return i don't know if actually i have to put something else no because this is uh this is a this is a promise right and whenever it resolved we are going to pass the response here so this is actually send response here okay this should work let's remove this break because we are actually using return trunk here okay uh what we are going to do with that info so for now let's use pre um [Music] here to present that in the front end and see actually how is the structure okay so current tab and we also need to pass it to the template here it's fine also for um the booking purposes i'm going to here just below and go to console.log um the tab itself you're gonna see why in a second okay so let's build it again it takes more whenever i'm uh recording the screen actually normally is really fast especially with bit but yeah okay so let's reload and i'm just going to open here so expect view service worker if you want to check something of the book something here in the background uh if you put this console log here you're not going to actually see it in chrome you need to open this one here um where you go now this is the previous one well let's open it again so this step tools here is going to show the message you see here is uh checking the background yes so let's go here for example reload and click here so something got wrong because it actually didn't open the pop-up and if you go to the depth tools we see that is nothing here so something's wrong also you have this to the book uh whenever you have an error inside you can come here and see like for example reactive is not um defined so this one is not defined here which is pretty useful okay let's see now i mean the developer experience is quite limited because you actually need to build it every time i guess you could put it like a build watch so it does it automatically but i mean it's not a big deal you can you can work around it okay let's close this one and go back again we can clear the errors to see if there are no new ones we reload and you also need to reload the the winner you were so okay we do have this but i don't see any current type data okay that's fine let's see what um [Music] the station here shows so pop-up in it is not oh my god wait i'm going to the same corner several days later okay i'm back basically i didn't put this correctly so let's build it again you need to put it as a string because it's not it's like a variable it needs to be defined so i think i know what is wrong um here first it needs to be asynchronous and this here needs to be like it's a promise so you need to wait for it also we're gonna get an error probably because we are trying to send the value to a const so let's change this and continue using the reactive one and say your current tab is equal to null that's fine and here instead of modifying this we're going to modify state current tab and we need to pass the current tab into the template so to do that i'm just going to use two refs and going to pass the state directly so um this is an utility from view 3. let me just import it before i forget that is going to convert each one of the properties here into actual uh refs okay so i can use cool i think it was that just to make sure let's cancel log here and consolidate this here okay let's try it out finally come on yeah so here we have the info um from the current tab and then you can present it in the way you want for your chrome station um and that's how you create the chrome extension using viet view and tailwind i hope the video was helpful for you and if it was please subscribe and drop a like it means a lot to me without further info i just going to relax bye [Music] [Music] [Music] you

Channel: Alvaro Dev Labs

Views: 913

Keywords: dev, development, labs, frontend, vite, vue, chrome, chrome-extensions

Id: E_189013gCM

Length: 40min 44sec (2444 seconds)

Published: Tue Aug 24 2021