How to create a Chrome Extension

For a while now I wanted to explain how I created my first Chrome Extension. I wanted an extension that would maximize YouTube videos inside the browser. We'll go over how to use manifest files to load page actions and call our content scripts. Each is gone over and is really pretty simple once you see it in action. Hope you enjoy it.

manifest.json

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

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.js

You 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.

start.js

This JavaScript file will be called when the function is 'turned on'.

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.

More information

Popular posts from this blog

Connect to Gmail with Apps Script