How To Build A Chrome Extension (Manifest V2) (2021 Web Development)

let's get a boilerplate Chrome extension up and running keep in mind that not all of these files are required to get a Chrome extension functional just for the sake of this video to create a holistic view on what a Chrome extension is we're gonna create all of these files so let's start with of course the manifest.json is a JSON file we'll create a background script we'll call it background I jsut can call it whatever you want will create a foreground script I'll call mine foreground you can call it whatever you want I'll then create a pop-up page I'm gonna call it pop-up dot HTML it is an HTML file just like the options page is an HTML file so these files here 1 2 3 4 5 are like the 5 basic boilerplate files needed for a well quote/unquote needed for a Chrome extension let's see if I can reorient the page like this so let's do the background here let's close this and the foreground down here there we go so let's start with that manifest.json we're gonna have it is a JSON so open and curly closing curly braces everything's in double quotes or no quotes if it's a number I'm gonna start with the name I'm gonna say obj extension I'll say a description let's say my extension I'll say a version you do have to manage the diversions yourself so I'll say 0.1 point O and then we'll move on to this manifest version I've never seen it other than - used to be one obviously I think I've never seen it at anything other than - so at the time of this video it's always - so it's a manifest version let's move on to the icons it's to find some icons so icons is an object I'm gonna define these 16 by 16 icon will say slash I think it's obj or is in my obj it is obj so obj - 16 by 16 dot PNG will copy this line 1 2 3 and the next one is 32 and then 48 and then 128 then we'll just change these guys here so 32 we got 48 48 and then 128 there you go so we've defined some icons let's move on to the background script that's defined in something called background this is an object and in this object - there's another property called scripts plural and it's a list an array of all the scripts you want to execute one your extension either gets installed or refreshed currently we just have one script so slash background j/s let's move on to the options page options page is defined in options page and that's going to be dot slash options on HTML and let's move on to the pop-up page that's defined in something called browser action or page action page action is a bit more complicated than browser action so for the sake of this video we're just going to use the browser action that has a property call to default to pop-up pop-up like that and we're gonna find that pop-up as P o pu P dot HTML and then let's define some permissions now permissions are everything your Chrome extension needs access to things it needs to do tabs it needs ad access to in order to run by default there are no permissions you can't do anything with it you have to be explicit about what you want in the front end and the back end so on the back end we need permission for something called tabs this is going to let us basically track what the user is doing with their tabs tab IDs URLs things like that so we're gonna need tabs and then we need to be explicit about which domains we want our Chrome extension to have access to so for the sake of this video we're going to be using the Google landing page as as a tester so HTTP colon slash slash wwq google.com slash star there we go permissions and that is not an object it is an array so delete this there we go there we go there's no formatter of course let's do this all right so a basic boilerplate manifest.json up and running name description version manifest version icons background options pop-ups and permissions so for the background page this gets executed as soon as the Chrome extension is either installed or refresh there's no delay happening as soon as they install it or if they refresh it manually this thing this script gets executed so console dot log and you'll see why I'm emphasizing that in a second so console dot log I'm just gonna say from background and for our front-end script I'm just gonna say from foreground so there we go all right let's move ahead to foreground installing the script now technically we're not installing the script in order to install the script you need to pass some benchmarks some criteria then you upload it to your developer console on Google they approve it they upload it to their store and then you can download and install it so technically when we're working on it in developer mode we're not installing the script we're loading it unpacked so we click load unpacked we navigate to the folder we're making this extension in we select this folder and just like that this is our this is our Chrome extension so now there are two different consoles when you're working in a Chrome extension there's your foreground console and your background console in order to access the foreground it's the same thing as always either f12 or ctrl shift J and we get the console that's a foreground console to access the background pages console or the scripts console we click this background page here so we click that and we've access to the console here and as you can see it says fump excuse me from background watch what happens when I control L so clear that and i refresh the extension so let me move here and again whenever your extension either gets installed or they refresh it this script gets automatically right away executed let's go back here let me refresh pay attention to the background console me OK increase the size there perfect so I refresh and we get the from background now where's the from foreground well we need to inject that foreground script into the foreground this doesn't get automatically executed the way a background does and so we inject it with a function from tabs which is why we needed it in the permissions here chrome tabs dot execute script and three parameters or arguments the first argument is the tab id you want to inject the script into now just because I'm on this this tab right here doesn't mean I can't inject that script into this tab here so this would be the active tab let's say this is one tab ID 1 2 3 4 just because I'm on tab 1 doesn't mean I can't inject the script into tab 4 but if you want to inject your script into the default or the active tab you just pass a null there so that's the first argument the second argument is the file you want to inject so we're just gonna say slash and it was foreground dot J s and then the third argument which is optional is a callback function we're just gonna say and I'll say I injected there we go we'll save and we go back and we have to refresh the the D Chrome extension now pay attention to the background console and pay attention to the this little area right here so I refresh and what happened so it says I injected but now I have unchecked run time last error can't access Chrome whatever I go to the errors I get that exactly same manner what's going on can't access Chrome colon slash slash you can't inject your Chrome extension into this URL quote and quote URL it's not valid it's not an HTTP or HTTPS this is a local URL or URI Chrome colon slash slash you can do Chrome URLs settings version extensions so this is not a valid domain to be injecting your JavaScript into and so just because we've defined hey I want to be able to inject my script into WWE google.com it doesn't mean we can be lazy on the backend and not check which page we're injecting it into so how do we check which page the users on so we can actually inject the script into this domain well we have to use another method of tabs so let's go back here so what we're gonna say is Chrome the tabs and we're gonna listen basically add a listener to what the user is doing and so it's gonna be what is it on activated and we're gonna add a listener and that listener is gonna listen for a tab ID or just lets a tab and that's gonna tell us what the user is doing their browser I just coughs without long so you guys can see what it is and this is gonna print out in the background I'm gonna uncomment or comment this line out we'll go back we'll refresh the extension it's all here we go refresh now pay attention to the background console so that's my active tab that's my active tab so anytime the user clicks a different tab our background is listening for that it's telling us what the current tab or the active tabs ID is so that's how we're going to know which domain they're on so how do we do that in the backend so we have the tab ID we can also use a function called chrome tabs get and based on a tab ID it again it'll get us all of the information about that tab so it's gonna be let's say current tab info like that another callback and now we have something called at the URL so console dot log and we'll say current tab info dot URL will save will reload our extension let me clear this let me clear this error so clear all go back pay attention to the background console i refresh see thin and now I'm moving between pages chrome new tab chrome new tab chrome new tab I can go to let's say Google WWL comm I can go back here I can go back to Google and we can see the domains right here so we're gonna listen for which tab the users on and then we're gonna do a get call for that tab ID and then we're gonna see what URL they're on and if they're on the proper URL which is this URL here this HTTP stuff then we're going to inject the script so we're going to say and this is going to be a regular expression I'm not gonna go I'm not gonna explain it if you want to know you can just look it up I'm gonna say if it matches HTTP colon slash slash we need to xscape those / / and www scape done so if they're on Google comm and that test and we need to do a google comm dot test and when it tests the current tab info dot URL so if they're on the actual URL then we'll inject the script all right it's uncommon that perfect it's not we go back let's do a clear let's go back into the extension something rid of these two guys there we go refresh all right so now when you go into the Google site we get I injected let's see if the foreground script actually injected so buddy the foregrounds console and there we go we have from a foreground so again just to sum up what we just did as soon as you would either install or refresh your Chrome extension this background @j s script gets executed it does not wait and so in order to accurately inject your script into a specific domain just because you've notified the Chrome extension of the the domain of the permission doesn't mean you don't have to code it in the back end you have to check what your users doing and then when they do what you want me to do then you inject your foreground script so let's do this before we move on to the pop-up in the options page in addition to executing or injecting a JavaScript we can inject a CSS script so let's do this let's create a script CSS where is the thing in let's say my Styles not CSS and in this style stock CSS we're gonna create an animation of a class or new spin spin spin and we're gonna say animation name let's just call it spin and what to say animation duration and we'll say no like I'd say one second one second and then we'll do animation iteration count will go infinite let's define the animation so at keyframes and it's gonna call them be called spin we're gonna start at a zero percent and we're gonna say a transform of a rotate of zero degrees there we go and we'll copy this paste not there paste here at 100% rotate what is it 360 720 1440 and that three spins we'll see that so just to find a CSS file in our back-end we need to inject it when we inject the the foreground script and so it's kind of the same chrome tabs instead of execute script it's insert CSS the exact same argument listing so current active tab and in the file so I'm going to say file slash it was my Styles not CSS and I'm gonna hit the call back I don't need the callback for this it's ready save we're gonna go into our foreground and we're gonna capture the ready capture this thing and they close this me maximize this so as you can see our little icon also shows up in the top right here let's capture this logo it's right-click inspect and what's it going to be called does have an idea a class unique ID all right there's no unique ID for this image but there is a unique ID for its parent so we'll go by the parent so say let's see if I can capture it this way this is going to be document not query selector like that and the idea of its parent is HP logo and it's the image does that contract perfect that captures it so when we refresh our Chrome extension it's gonna execute the background script background scripts going to inject our foreground script our foreground script is going to capture the the logo and it's gonna add a class so class list dot add a spin spin spin of the CSS and that spin-spin-spin is going to spin the logo infinitely so save let's go back let's do a refresh and let's go to the Google front page and if we see this we've just injected a foreground script that uses another injected style script to spin a logo so this is basically how a Chrome extension works the background jazz monitor is what the user is doing based on what the user is doing you inject scripts into the page and those scripts act like any other script jsut right so moving on to the pop-up and the options these ones are easy-peasy so let me need to this go pop up here and go options yeah they're literally HTML pages you can attach scripts to them if you want for the sake of this video we're not going to this video getting long so it's closed down the back put the background here alright so for a pop-up HTML we're just going to say I don't again it's boilerplate HTML saying h1 I'm the pop-up right there we'll save and we'll do for our options we'll say h1 I'm the options literally that easy so we go back to our page we refresh the extension now when we click the little icon on the top right we get I'm the pop-up that's the page we wrote in order to get to this options page we go to our Chrome extension here click details and click the options down here extension options and we get I'm the options so literally just HTML pages for your pop-ups and your options you can inject or excuse me you can attach scripts to it like this I'm not going to for this video but again literally HTML files that's how these to work so how do we handle state in a Chrome extension how do we get the foreground script to communicate with the background script or the front-end to communicate with the backend and so to show you the answer for those two questions I'm going to let me stop that spinning first so save let's do a refresh stop the spinning stop the spinning alright so what I'm gonna do is I'm gonna put two buttons on the Google landing page when we click that first button it's gonna set some say data in the storage when you click the second button the foreground script is going to tell the background script hey there's some data in the storage take the data out of the storage and just print it to your console to start off I need some permissions for my storage so I'm going to go into my manifesto JSON and I'm just gonna say storage just like that so let's add those two buttons to the front end let's do a let's say first is equal to document if not create element a pretty button let's say first thought inner text and we'll say set data and then we'll do a first thought ID of first and I've defined some CSS here just to position the buttons on the page so let's go copy let's do a paste and this is going to be the second button and so that needs to be second this also needs to be second and this also needs to be second the text will be let's say shut out - back and there you go let's add these guys to the page so document dot quarry selector will get the body and what you doing append and will go first copy paste and we'll do a second let's go to the front-end and see if we have the buttons on the page so refresh I need to refresh the page there we go oops there we go so we got set data and shout out to back-end we click the buttons and nothing happens let's wire up the add event listeners so we'll do first start add event listener I'll listen for a click and we need to set some data in the storage now there are two ways to set data in the storage we do chrome storage dot sink and we can also do chrome dot storage dot local the difference being if I'm using this Chrome extension on this browser on this machine and now you sync if we set data to the sink if I go to a different machine different browser but I sign in that data sinks across devices for the sake of keeping this video simple we'll just use local so chrome got storage local that's set we're just gonna set a password so password and we'll say one two three and let's just do a console log so we know that we hit this button so console dot log and I said data there we go save let's go back to the front-end refresh refresh the extension and then navigate back if you're wondering why I'm doing a refresh of the extension and then refresh the page and I go back to extension then I go back to the page it's because we're listening for on our back end right here on activated on activated only triggers when you activate the active tab so if i refresh this and i go back to here and there's some sort of data left over on our Chrome extension and I don't refresh it won't refresh the tab and so programming a Chrome extension can be a bit hairy and that you have to account for everything your users doing refreshing the page like this is not the same as activating the tab like that so you'd have to have code in I think it's chrome dot tabs dot on updated a different listener just to get a an accurate view or an accurate beat on what the users doing with the browser so that's why I'm doing the whole refresh the extension going here refreshing this page going back to extensions tabbing off of it and then tabbing back on Google anyway so I set the data and I get the I set data but first let's code the second button so second thought out event listener we're also listening for a click but this time we need to send a message to the back end so to do that we need chrome runtime dot send message and we're gonna send a message of it's an object will say I don't know me yo check the storage there we go alright so we've set the messages to a console dialogue so we know we're doing it I'd say I sent the message there we go let's back to the front end go to extension refresh go here refresh back here back here set the data I set the data shoutout to the back end I sent the message we need to receive this message on the back end to do that bring the background script here we need another listener that listener is chrome runtime dot on message dot add listener there we go and it gets three arguments it gets the message sent or the request sent someone say requests like this it gets information about the sender and then it gets an object or a method that we can use to send a message back to the front end we just say send a response like this all right so let's check the message so we can say if request and we put the request in an object and it was done message is equal to and the message was or was message yo check the storage yo check the storage so if that's our message from the front end and we're going to get the data from the storage and to do that we just do Chrome that's storage dot local get and we pass a string or it's an array of strings if you want a string of the key we want and the key was password there we go so it's the first argument of get the second argument is the actual answer or the value just say value like this and then we're going to print that value to the console the console dot log that value there we go let's go back to the front end will refresh the extension fresh the page go back here activate the tab we set the data perfect I set the data and let's go to my background there we go background console shout-out to the backend I sent the message go to the backend and we get the message printed out so we got that message from the front-end and checked the message the message was yo check the check the storage it checks the storage and it prints out the value here now there's two ways to communicate back and forth I'm going to show you this way and I'm going to show you just like we said chrome runtime dot send message that's a way of initiating a message string with the front and a back end when I use send a response right now like this so I'm gonna send response i'ma send a message this does not create a new message string it's on the same message string as this guy right here so I'm just gonna say message is equal to yo I got your message there we go and to get this message on the front end or it doesn't matter you can go back and forth to receive this message from someone who's sent a response you have to code for it in the send message method right here the second attribute or excuse me the second argument of this would be any sort of responses so I'm gonna say response and we're just gonna say console dot log their response like this alright let's go back to the front end I think I'm just showing you the call in response between the front end and the back end go here we refresh the page we unactivated the tab activate the tab it's set data there's data in the local storage click shadow to back end and we get I sent the message back end gets okay I got the message I'm going to print out the value I mean to send the response and the response was yo I got your message now how do we initiate a message string from the back end we did it with the front end with this send message in order to do that we'll do Chrome dot tabs dot send message not a response send we move up so you guys can see so send message and there's four arguments to this we're gonna use the first two the first two are the time tab ID and then message the message is gonna be the same it's gonna be yo I got your message and so this tab ID can't be null the way this guy was null to indicate the current active tab so we need the actual tab ID of the tab that we injected these script into luckily we have it right here unactivated this tab ID so we need to save this outside of the scope of this function here so let's say you let active tab ID equals zero for now and then once we get the active tab ID we'll set it right and we'll set it right here so active tab ID is equal to tab tab ID there we go so we have the active tabs ID we can use it to send a message right so we don't need this send response here we can send a message right here so that would be the active tab ID now we need to just like we had in our background here we had the flow listener for listening for messages we need that in the front end so chrome runtime dot on message add listener and it takes three arguments or gets three arguments to request the information about the resent the sender and the ability to send a response which we're not going to use but I'll code for anyways so we're not even doing if we're just gonna console that log that call to that log the request dot message so let's go back to the front ends we're sending in this space assets crude all right there we go back to the front end refresh the extension refresh the page go back here alright so click I set data or set data we set the data shoutout to back-end we get last the message port closed before the response was received all right so why are we getting this so we got the message we're sending from the backend do I got your message why are we getting this undefined that's because we're expecting or we printed out a response from the initial message string right here so we need to delete this guy it's expecting a send response object to this guy right here but we're not using it to send the message anymore we're using our standalone or opening a new new message string with this guy so we can delete this well save will go back we will refresh the extension refresh the page deactivate the tab activate the tab click set data we set the data shadow to the back end and we get there we go I said the message the back end gets the message prints out the value from the storage sends a response a new message string saying yo I got your message and on the front end it gets that yo I got your message so this is just how we handle state and messaging between the front end and the back end in a in a Chrome extension and so that's gonna be it for this video guys if it gave you any sort of help don't forget to give a like subscribe if you haven't already subscribed any comments down below and I'll see you guys in the next video

Channel: An Object Is A

Views: 79,705

Keywords: chrome extension tutorial, google chrome extension tutorial, how to make a chrome extension, build a chrome extension, javascript, web development, create chrome extension, chrome extension development, how to make chrome extension, how to create a chrome extension, chrome extensions

Id: -dhMbVEreII

Length: 27min 15sec (1635 seconds)

Published: Tue Apr 07 2020