How to create a Chrome Extension
This file tells Chrome what we are building, what permissions we need, what images to load, among other information. It's the basic recipe that is used to build our extension. This file is really straight forward and well documented. So let's take a look:
Few things to point out here. The permissions section is important, we are only interested when the user is on YouTube.com. It's very good to only ask for the bare permissions that you need. Also note the version number, pick whatever version you want and go with it. You'll be incrementing this number each time you do an update. That's how the Chrome store knows to push a new version to your users. The icons are in the same directory as the manifest file and used to display to the user.
Page action is a fancy phrase for 'button to be clicked on'. However this is different from a browser action. Page actions are inside the URL bar and only displayed when something happens, for example, it'll only be displayed when the user is on YouTube. Browser actions are always available for the user to see. Make sure you pick appropriately.
Ok so we have our manifest file and we know we want to be a button. Let's take a quick high level view on how Chrome extensions work. The background file is loaded and is your main logic of your extension. We also have a page action button sitting there waiting to be clicked on. Then we have context scripts that are injected into the users page when they are on YouTube. The logic will setup the listeners and detect when we are on YouTube. The context scripts do the work of resizing the video player and adjusting the CSS of the page. Messages are sent between the background page and our context script. I use it to tell our logic page what state we are in. Is the video player currently maximized or not?
background.jsYou can see here we are checking to see if we are on YouTube. If so we add our page action, and setup our listeners. If our page action (button) is clicked we'll start maximizing the video by calling start.js. One thing to be clear here, background.js is our logic only our content scripts are inside the users browser. That is defined in our manifest file and includes jQuery, content.js, start.js & off.js.
Alright so you can see how I hide the major parts of the video player and expand it. Well, everything was going great until YouTube did a redesign. So, this doesn't exactly work perfectly now. Which is OK because we can fix it in a later post. Once the window is maximized the extension will call off.js to restore it back to the previous size. In the provided source files you can see that content.js will send a message back to our background.js and let it know its current state. Perhaps I'll go a bit more into detail in the future.
To install you'll go to Chrome settings -> Extensions -> Load unpacked extension and just load up the directory holding all of this. When you are ready to publish for real we'll upload that to the Chrome store in another blog post.