Developing Extensions for Google Chrome

Hello world how are you? My name is Joseph as you know ... here I welcome you to a new course for development channel for Google Chrome Extensions So in this course we will see as an extension which is the extension of my own channel develops notifies you when I have uploaded a new video For you to be mindful of what is going up and receive notification through notifications, it is a very simple example

But it serves for you to learn how to program extensions for Chrome. In this case the course will be in charge of one of the subscribers to this channel And fan is a real crack and I really admire him because he is very young for his age handles many languages ​​and at a very good level So good for ... This course will teach him. I will guide you all in the process because to have that line sequence

also I take this opportunity to say that if any of you because you bring something to the channel or some kind of knowledge or development of any technology That does not currently exist because I am open to do so. So we started with the development of Google Chrome extension You can download will have on the link in the video description and in the first video that will see now, they will see how the extension is configured

And the basic files that allow operation as manifest.json and those files as icons and etc. So I leave you with Izan That is a real machine and enjoy ... Hi I'm Izan, and this is the first episode of extensions for Google Chrome ... In this episode I will show, first the basic requirements they will need to make an extension. We need to make a folder ...

For we can put any name ... I put the abbreviation of 'Source' which serve to the source files, here in icons will ... To start the application some icons 128x128, 48x48, 16x16 and 19x19 pixels other. Also we need for this project Jquery Because that will be much faster to develop. Then continue ... Then we have to make a file called manifest.json

If ... to see .. manifest.json okay? (Talking to himself). We'll have to see if you've never used a file manifest.json but basically we have to put Is so to speak ... This file basically used to tell Google Chrome stuff like our app permissions you need, name icons We start putting 'name' colon and can put 'Youtube notificator' and a comma and we have to put the version and we will put 1.0

Since we have not made any update ... The 'description' Oh! Had put in Castilian ... I do not know for example 'Use this to find out new videos' ... For example ... it could be anything else ... has gone keyboard ... (talking to himself) What else? We have to put the version of manifest.json This truth just not understand that it was but worked just placing a two, so for the moment I can not explain, I went crazy trying

I started putting zero and one until I put two and it worked. Moreover, for some reason I was wrong ... really I do not know why. We need to put 'Author', put it in my case 'Izan' in your case because your name is basically to identify. Good important part 'Icons' Vale? We'll have to do to put it in a way a JSON variable equal when you make a javascript json or else

And we have to put these values ​​... '16,' as in my case would be 'src / icon16.png' then we have to put '48: src / icon48.png' Then do not know if want to make your own icons or test can go online looking for some but really this is not a course in Photoshop So either I'll explain how to make an icon for that it is very complicated and if you want to do something very elaborate ... we also have to put

128:' 'src / icon128.png' Vale? Theoretically it's all right. Then we have to put 'browser' a variable that is 'browser_action' And this basically have to put Eh ... I mean this is information for the Chrome browser and we have to put the default title Which in this case it could be as exactly the same thing here. We have to put the default icon 'default_icon' here is when Well ...

It is not mandatory to be 19x19 pixels but I've put that value is 16x16 bastente well because it looked a bit pixelated And with 19x19 pixel not seen but the size should be the smallest possible and we must also put the 'default_popup' This is the 'default_popup' is that when we click on the extension icon click or give him any extension

The eyelash that opens because here is where we have to tell what will be ... for now we have no popup but we will invent and 'popup.html' will be called So ... we continue to this we are going to put a comma, and now we lack is the background. In the background if only we are going to put a value We must use it well. Here we have to put it'll be in the background or is the background that will be running because here we put ...