Coding an Extension that Blocks Social Media Websites | Chrome Extension Tutorial

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this really fun video where i'm going to be teaching you guys how to build a chrome extension that will be able to help you um stop procrastinating on your studies or your work um basically what it does is when you go to a website such as youtube um you'll see that it doesn't let you actually go to the to the website it will redirect you or at least edit all the html in the page to this and there's nothing you can do other than just turning off the extension obviously but it works on other pages as well um you can go to netflix it is customizable so when you go to netflix it says netflix is setting is better than netflix um you can go to something like um facebook and you'll see that it isn't like just the the main page like facebook.com if i try to go to for example um facebook.com facebook marketplace right i'll come over here you'll see that it will still block because it is not basing itself on the actual domain over here it's based on the host name um we can add more layers of security or prevention if we want to but i want to keep this simple it's a great introduction to how create how to create actual like chrome extensions and i think it will be pretty nice you can see that this ui over here for the page it was heavily inspired by this that i found here um on codepen i'm going to leave the link to this in the description we're not going to be focusing on html and css for this tutorial because the whole point is making the extension and the logic behind it so i actually just copy and pasted this the credit for it is in the description check out it looks pretty nice okay so as you can see we have here um we opened up a single folder inside of our computer and called it chrome xt something like that i'm going to call it whatever you want it's just a the folder where your code is going to be located at so what we want to do whenever we want to create a chrome extension is we want to create a file inside of our folder called manifest.json this will contain all the comfort of configuration information for the specific extension that you're creating and it is necessary to have it or else chrome won't be able to recognize your project as an extension and over here we do need to write some json however what i recommend is there's just some certain things that are important to change inside of this file um and i'm going to show you guys which one of them i'm talking about so the first thing we need to do is we need to put a version for this manifest so we need to declare something called manifest version and here we kind of just put like a number since it's the first one we'll pick one but like it just means that um this is the first time we edited the manifest then we want to put a name for our project or our extension i'll call it something like work tracker or procrastinated like uh i'll actually call it social media blocker something like that and then we also need to put some other information like the version of the project so if you want to create different versions for your for your application for your chrome extension and you launch them you can put the version over here so right now let's just put 0.0.1 uh whatever you want to do you can put whatever number over here this is going to appear in the real like chrome store determining which version your app is in and then this is very important we need to put content scripts now i wouldn't worry that much about understanding what they do um especially in the beginning but basically you need to pass here an array um containing uh basically all the different content scripts that you want to have in your application such as the javascript files that you want to be listening to and uh their their actual paths so what i want to do here is i'll put first of all a matches property oh and i also need to open an object inside of here so i'll put a matches property like this and this will basically say that i want my application to run and i can put all the urls that i want my application to to to like be functional on and since i want my blocker to work on mostly every single web page i'll just put a tag over here saying all urls and this will be able to satisfy what we want and then we need to direct what is the javascript file that we want to run when our extension is actually working so this is basically what is the entry point of your extension where is the code going to be located so i'll put it here js to say that it is a javascript file and then i'll pass here an array and the name of the files that include javascript that we want to listen um so i'll create one over here i like to call it uh content dot js like this and right over here i can just put the name of the file so i'll call it dot js and now our extension when we load this to google chrome it will know that we are only running the already at least in this case we're running the code that exists inside of the file content.js we can put many other things over here we can put an icon to our thing i'm not going to do that but one thing we actually have to do if we want to add any html to our extension is we can come over here and actually specify which html files we want to to run i don't care that much about that right now initially let's just write the code that will be able to block the different social media web pages so basically we are kind of done with the initial part with the configuration part and we can start actually running our writing our code that will serve as the logic for our extension so instead of this content.js what we want to do is we got to take it into account that every time you enter into a web page it's going to load our extension so it's going to recognize that we open a new website and it's gonna run this content.js file so technically what we can do is um we can just put some sort of code like direct javascript like an alert message over here and put a simple uh i don't know simple message like hey guys um and if we and before we actually just check this out um one thing that i actually forgot to say is that at least for the development uh version while we're debugging right now we'll have to set this equal to two sorry that i said one first um we need to set this epitome or else it literally won't run your your extension and the chrome developer um panel so you need to set this to two or else it won't work so what we want to do now is we want to come here to our chrome extensions url which is inside of your google chrome you can just check it out it's where all your extensions are and you'll see that there's a simple toggle over here called developer mode you just click on that like this and you'll see that it will appear all the like this small little bar over here you just click on load unpacked and put the path towards where your your actual folder are so my folder is chrome axed um that's how i called my my project so i'll just put a path to here and i'll just open inside of this directory and you'll see that now the so the project the extension that we created is appearing over here you'll see that the name and the version that we inputted is actually correct and you'll see that it's turned on right now so uh if you want to turn it off you just pull this toggle but if you want to turn it on and actually test it you just do it like this so let's test what's happening if i actually go to somewhere like um i'll go to google like this uh you'll see that um it should alert a message saying hey guys right um it's working perfectly if i go to my youtube channel um like this uh pedro tag i'll go to my community tab you'll see that it will alert the message again the the actual extension will run every single time you open a new web page which means it's working so if we want to this was just a test now we want to actually write the logic to to to make it so that it will block whenever we visit a new webpage that is a social media platform so to do that what we need to think about is like this so this will run every time you open a new website so technically what we can just ask is if the actual website url includes um some sort of social media host right so for example if you go to any youtube um website any youtube url it will have a host name of you www.youtube.com that's that's the standard doesn't really matter which kind of tab you're inside of youtube most of them will have this hosting so what we can do is we can do a simple if statement over here asking if window dot location dot host name is equal to um something like www.youtube.com then we want to do something uh for now let's just alert a message saying um you are in youtube now let's save this file and if you want to see the changes again you just need to click on this refresh button over here and it will automatically recognize now if i go to my actual to to something like google.com you'll see that it won't alert anything because we're not in a website with a hostname of youtube but if i go to my youtube webpage you'll see that it should alert a message saying you are in youtube that's actually wrong english but basically you can see that it is working it is recognizing that we're going to a youtube webpage and it is kind of uh writing some javascript based on that so what we want to do now is we we're going to do this for many different web pages not just for youtube so we want to make it so that the code is as organized as possible so that we don't we can easily add a new web page that we want to block right so the thing what i want to do is i want to actually make a switch case over here and so we don't have like a bunch of if else statements and i'll write switch and the condition is well if the window.location.hostname and the different cases will be basically the different hosts that we want to block so for example a first case will be um www.youtube.com right and we're going to put some logic inside of here for this specific case and at the end we're just going to break our actual switch case so this is going to be the format we're going to write some sort of message over here saying this is youtube something like that and we want to do this for many different websites for example we just come over here and just keep pasting um the different cases and changing it to like facebook uh maybe netflix we're not gonna do all of them um right now because it is better to actually start implementing the logic to how we're going to actually change the whole web page and prevent people from actually seeing this stuff so let's do that actually first one cool thing that you will realize is that you can just run javascript right any javascript that you like you've used before you can just run it over here and it will automatically impact the page so for example when you go to youtube you'll see that uh it will actually show uh the the webpage like like this right it will show this page over here it has all the html inside of it however i can edit it very very simply by coming to our our code and just accessing the the actual html by saying document dot um let's see what do we want to access inside of the document let's access the body tag because i know that every webpage has a body tag and let's change its inner html to be equal to something like um i don't know i'll make a button right you can actually put html inside of here and change it so i'll make a button um and just say something like click here now if we save this and go to our google chrome and refresh the extension you'll see that now if i try to go to youtube again it will uh actually replace everything for a single button and now if we try to go to youtube again um you'll see that it will replace everything in the screen to a single button as you can see right here right so change the whole html to the button which is amazing so um basically if we want to change it to that specific page that we created the the 404 page with the beautiful animation something like that um again the link for the code is in the description what i want to do is i want to come over here and i will create a function called generate html like this and it will take on a single argument which will be the the name of the website where where we're showing this so for example for youtube we'll put youtube for facebook with facebook just so that each page page is customizable and we'll put page name over here and inside of here we're going to return some html and we're going to use backticks instead of normal string so that we can just write a huge html um like html like actual web page inside of this function so that it doesn't fit all of it inside of a single line so the html we're going to be using i'm just going to copy and paste it but again the link for it is in the description you can see over here it is very basic all we do is we're just returning a div where it has some ids it have a couple divs inside of it to represent the clouds and it has all the different texts that we want for example for the first title i said get back to work and then i say study is greater or better than um whichever patient we put for this function so now if i want to generate this and change the html inside of youtube for example uh to be something similar to this i just have to come over here and say this is equal to generate html and pass the name of the website so i'll pass for example youtube over here and if we come to our application we reload this when you go to youtube again you'll see that now it should actually render everything and then change it back to this simple html that we created you might be wondering okay but this doesn't look like the page you showed in the beginning of the video well because we need to add some styling we need to add some css so similar to what we did here with the html i'm going to create a function over here called generate styling and i'm going to set it equal it doesn't take any arguments all it does is it returns a style tag which is the css that we want to use so i'll say return and over here i'll use backticks again and i'll just put the styles just copy and paste the styles which again you can access in the description okay as you can see it's a lot it's a lot of css which i didn't write myself but you can see if we actually generate this and at the end we we just call this function it should be working but we don't want to put the styling inside the body the style tags usually put on the head so i'll just come over here and say document dot head dot inner html is equal to generate styling and now we'll change the actual css of the web page to satisfy what we copied from the the codepen um animation that i searched for so this should be working right here um what we want to do is we want to go to our chrome extension tab and we'll reload it again and just see if it looks like um the extension that i created in the beginning and you can see clearly that it does um it says it has a beautiful animation it says 404 get back to work setting is better than youtube and it doesn't matter i can go to uh i don't know i'll put this video how to eliminate shoulder pain it's a video that i watched i have a shoulder pain so i'll just click on this and you'll see that it won't work it will redirect you to this page which is very handy um the only negative side is that you can just turn the extension off but to be honest just it's just a cool little project that will teach you at least the basics of creating some chrome extensions and now let's implement this for the other websites as well i'll come over here just copy this and paste it over here and it will automatically do it we don't need to copy all the styling and html because we actually created functions for them so uh instead of being youtube let's say facebook um like this face book and we'll do the same for netflix and you can do this for anything like every single website so i'll put for netflix what other website do i use a lot um while i'm studying um let me think oh i forgot to put a case uh let's just put a case over here um i'll say maybe maybe some spot no i like using spotify um let's block maybe some discord right uh imagine if you use a lot of discord i'll just come over here put the host name for discord and we can put this over here change this to discord and save it now let's load all of this and obviously you can add any websites you want let's just refresh this let's try to go to discord you'll see uh actually discord uh doesn't have the www for its host name let's just keep it like this and i recommend looking specifically for which host names will work for discord i know this as for a fact that it doesn't have the www so we don't put that or else it won't work so let's come here to our actual extensions tab and let me refresh my extension and let's go to test it right let's go to netflix you'll see that netflix um doesn't allow me to let's go to facebook oh i actually searched for something wrong let's go to facebook you'll see it doesn't allow me to and it even changes a bit based on facebook because maybe the html is kind of kind of ruined inside of the web page let's go to something like what else did i put i put discord let's go to discord you see it doesn't allow me to go to it as well so this is basically it i really hope you guys enjoyed this video it's a really quick video uh i just wanted to record because i some some of you guys have been asking me for this specific extension because i may i mentioned it in my previous chrome extension video so if you enjoyed the video leave a like down below and comment what you want to see next subscribe because i post two to three times a week and i would massively appreciate it if you guys could support the channel grow um we're growing a very fast rate and i can't i couldn't be more grateful for that so i really appreciate it if you guys um just help me out uh let's hit 20k maybe by the end of summer so yeah that's basically it i really hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 17,168

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, chrome extension, chrome extension tutorial, coding a chrome extension, coding chrome extension, google chrome, coding tutorial, chrome extensions

Id: dIrXIJ781DQ

Length: 18min 13sec (1093 seconds)

Published: Thu Jun 10 2021