What do you want to learn?
Skip to main content
Creating A Chrome Extension
by John Sonmez
In this course, you'll learn how to create several different Chrome extensions.
Start CourseBookmarkAdd to Channel
Table of contents
Hi, this is John Sonmez from Pluralsight and welcome to this course on Creating Chrome Extensions. Chrome extensions are a useful way to add functionality to the Chrome web browser which can come in handy in a variety of different contexts. You can use Chrome extensions to integrate capabilities of your application or service directly into Chrome or you can create Chrome extensions that add useful functionality to Chrome itself and even modify web pages browsed with Chrome on the fly. In this course I'll take you through the surprisingly easy process of creating Chrome extensions. We'll learn the basics about Chrome extensions and how they work. And create our own extensions. We'll create both an extension that uses a user interface and one that works in the background to add capabilities to webpages in the browser. So, if you've always wanted to create Chrome extensions, but you didn't know where to get started, or you thought it might be too hard, keep watching and I'll show you just how easy it is.
Who This Course Is For
What This Course Will Cover
What Is A Chrome Extension
Looking At Some Extensions
Now I want to show you a couple of different extensions just so you can get a basic idea of what a Chrome extension is. So, you've probably already installed extensions in Chrome if you've used Chrome. But, maybe you haven't. If you haven't ever installed any extensions in Chrome, you can usually find extensions by going to the Chrome Web Store. So, if you go to chrome web store. Inside here, this is a good place to find extensions if you just go to extension here. And if you're not familiar with extensions already, I encourage you to take a look through here. Especially if you use Chrome, there's quite a few really good extensions in here. In fact, I need to go back through here and see if there's anything new that I might be able to utilize that I've been missing. A lot of times extensions can really enhance the usage of Chrome because it can give you some capabilities baked right into the browser that can really come in handy. For example, I have a couple of extensions installed; one of them is the School of Voice extension which I really like a lot because it lets me access my Google voice messages right here and to even call and text someone. And then I have this Bookmarking extension that automatically adds to my bookmark. And so this is a pretty neat extension and this just shows you some of the capabilities of the extension framework in Chrome. So for example, when I click this, it brings up my bookmarks and I can search it. So, this has the extensions UI, but it also integrates directly into this Omni bar in Chrome. So, if I hit * and then I type here. So, I do let's say .NET. You can see that's actually searching my bookmarks and it's going to show me what bookmarks are matching here. So, I can actually go to a bookmark directly from here. You can see that is shows this Neat Bookmarks. So, extensions really have a lot of different capabilities that we can utilize and we'll talk about these more later. But, this should just you a basic idea of what extensions look like most of the time you're interacting with them here in the browser. But, extensions don't actually have to be here in this toolbar, some extensions are going to be running in the background and you won't actually even see them. You can always see all the extensions that are running inside Chrome by going to this Manage here. Or just doing chrome://extensions, you can just go to this in your browser and you'll see all your extensions. And here you can actually see the Permissions for the extension, go to the website, you can allow them in incognito mode and set the options on that. Or you can enable or you can delete the extensions. So, you can see all the different extensions that I have here. So, if you're not familiar with extensions at all, if you haven't ever used them in Chrome, I encourage you to go to the Chrome Web Store and try a couple of extensions. Install them and get an idea of what extensions can do and what extensions are out there before you continue with this course, because that will help you when you're trying to learn about extensions.
Extensions Versus Plugins
I mentioned that I'd show you the difference between extension and a plugin just so you could see for yourself. So, let's go ahead and take a quick look. So, it you do a chrome://extensions you'll see all of the extensions here. But, just to show you they are different, if you do chrome://plugins you'll see that this is quite different. In fact, you have Adobe Flash Player as a common plugin that ships with Chrome. And here if you hit this you can see the details, but your default view would be here where you don't see the details. But, you can see that these are actual plugins and plugins are different than extensions. These are going to be accessing your computer outside of the sandbox. This could be a lot more dangerous. In fact, a lot of vulnerabilities come through the Flash plugin. If you've heard of some of the exploits that have happened with some of the common browsers, a lot of times it's through a plugin. So, you can see that plugins are definitely not the preferred way to extend the capabilities of Chrome. Now, sometimes you do need a plugin, sometimes you don't have a choice and you can, through an extension, register a plugin, but we're not going to cover that in this course. It is a rare occurrence though unless you're doing something like creating your own Flash Player or something of the level of, for example, the Microsoft Office plugin which is able to launch Microsoft Office documents from Chrome and things like that, you probably don't need to create a plugin. You can probably create an extension instead which is a lot easier to do and is a lot safer. So, if you want to ever see the difference, you can just go to extensions or plugins and here you can manage either one of them.
How Chrome Extensions Work
What Extensions Can Do
Now I did want to show you where you can get access to information about the Chrome APIs that we're going to be using in the course and I want to give you a quick overview of what's available just so you can see how powerful the Chrome APIs are and how much you can actually do with your extensions. So, if you go to developers.google.com it will take you to this page and here you can click on Chrome extensions. From here you can read about extensions, we're going to cover a lot of this material in this course, but one thing that you might want to check out is this Reference portion here. This has some really useful information. Specifically let's look at this chrome.*APIs. So, this is all of the APIs that are available through Chrome. And here you can see that there are quite a few different things in here that you can access. For example, we could go to events and then you can see that we have this chrome.events. And this gives some documentation on the chrome.events API to basically let you subscribe to events. So, you can utilize this in yours extensions. And it has some good documentation on all of this. So, you can go through this chrome.*APIs to find out exactly what you can do with Chrome. Chances are if there is something in Chrome that you want to do with your extension, you can probably find out how to do it through here. You can access really most of Chrome through this. And throughout this course we'll just be using a sub-set of the Chrome APIs. There's so much of the Chrome APIs, obviously we can't cover all of them in this course. But, once you know how to use some of the basic APIs, it'll be easy to go to this page and look at any other APIs that you want to use and figure out how to use those.
Checking Out Background Pages
So, I want to show you how you can check out the background pages that are running inside of Chrome. And also, just another tool that you can utilize when you're developing your extensions that you'll probably find useful for checking the memory requirements and seeing what's running. So, if you go to your Chrome options here and then go to tools, you can see this Task Manager. Now this shows you more than just the background pages. It shows you your actual browser and the tabs and then any apps that are running. And also, your extensions themselves and how much memory they're taking up. This is pretty useful information. But you can also see here something's like the background page if you have different background pages running. And you can see how much memory those background pages are taking. So, this is really useful for figuring out exactly what's going on. And it shows you which background pages are running. So, if you're wondering why your browser's running so slow, or why it's taking up so much memory, when you look in here and you see how many extensions are actually taking up a large amount of memory, that's your answer. So the more extensions that you install, the more that you're going to be using up memory with Chrome. And you want to be careful with that when you create your own extension; you probably want to look in here and check out the memory requirements of that extension. Especially if you're using a background page, you can see that some background pages can take up quite a bit of memory. In fact, I have a background page for this REST console, and it doesn't even really make sense. I'm not using the REST console activity, so it might make sense to disable this extension. This extension probably really doesn't need a background page because I can't imagine why it's using one at this point when I'm not even using the REST console in my browser.
The Manifest File
The first thing we'll need to create our Hello World extension will be the manifest file. The manifest file will describe our extension and reference the HTML file we'll be using to display our UI when someone clicks our extension icon in the toolbar. The manifest file uses the JSON format as you can see in this example. So, it's pretty easy to read. At a minimum, a manifest file must have the manifest version properties specified, which in our case will be 2. The name property which is the name of the extension, and the version property which is the version number for your extension. A description and any icon files are optional, but you should probably include those properties if you're going to put the extension in the Chrome Web Store. Also, in the manifest file, we can specify whether an extension will be a browser action or a page action or neither. Remember, a browser action is going to show an icon in the toolbar that can be clicked to activate the extension, while a page action will show an icon in the address bar of certain pages. We can also specify the background page for an extension if it has one, or the context scripts the extension will use if it has those, as well as an options page, permissions, and a pretty large list of other properties for the extension. You can find a complete list of all the properties of a manifest file here. It's a good idea to read through this list at some point so that you can understand all the capabilities that can be defined in the manifest file.
Creating The Manifest
Creating The HTML Page
Okay, so now let's go ahead and create our HTML file. Remember that we need to have a popup.html, that is what we had specified in our manifest.json. So, I'm just going to do a new text document. And I'm just going to call this popup.html. And then we're just going to edit this HTML page. So again, I'm opening this up in Visual Studio, but you can use whatever editor that you'd like. And remember, this is just a basic HTML document. So, I'm just going to do the doc-type declaration so, doctype html. And then I'm going to add the HTML tag. And then we want to have a head, and inside our head we're going to add a title. And we'll just call this Hello World. And then inside here we could add some styling if we wanted to. And we can add our scripts in here, but right now let's go ahead and finish creating the rest of this. So, let's put after our head, our body. And then for our page, let's actually just make an h1. And we'll give this an ID, we'll call this greeting. And then we'll default this to be hi. And then let's go ahead and make an input box here so, we're going to say input=name for the ID and then the type will be equal to text. So, we'll have one text input box and that's it. That'll be our basic HTML page. And a little tip here, if you use Windows, you can actually set up your preview mode in Windows so that when you click on an HTML file, it'll show you the preview of it and actually render that HTML which is pretty neat. Especially when you're designing some HTML like this where you can't easily just test this out in the actual extension. You can just open this up in a browser as well if you want to. But the way that you do this is just go to Organize and then Layout and then check this Preview pane. You'll notice that if I turn that off and then I go back in here and turn this on, it'll show that preview. I tend to like this for a lot of different files that'll give you a preview which is nice. For a video, it actually gives you a video player here that you can click Play.
Adding The Icon
Okay, so at this point we can almost preview our extension by loading it into Chrome. The only thing that we really need in order to do this at this point is our PNG for our icon. So, I'm going to go ahead and go to our directory here. And I've already created an icon.png, I'm just going to Paste this in here. Let's take a look at that real quick. It's just a picture of a world here for our Hello World that I just created. It's just a 19x19 pixel icon. It's a PNG file. So, that's specified in our manifest.json file which we're definitely going to need in order to be able to load this and test this out. And so, let's go ahead and go to our browser. And what I'm going to do here is I'm going to go ahead and go to extensions. So, we're just going to do chrome://extensions and then I'm going to switch Developer mode on. So, by default this will be off. It we click Developer mode you'll see this Load unpacked extension. We can go here and we can just browse to the directory that contains our extensions. So, this Hello World directory. So, then I'm going to click OK. And now you can see it's loaded this extension and we can see that it is set up, it's Enabled. We can remove it here if we want to. And you should see it show up in the bar now. So now, if I click this, you can see it shows this HTML. That's all we really need to create an extension at this point. Now, we're going to add a little bit more functionality to our extension just to see how things work. We're going to keep things pretty simple, but that's really the basics. We just have a manifest file that specifies an icon that specifies the HTML and we just have a simple HTML page. You can make an extension that is really this simple.
Now, just as you might except, we can also add CSS. We could put that in line into our HTML or we can just go ahead and create a new style sheet. I'm just going to create a style sheet; we're just going to call this popup.css. And we're just going to put a simple style in here just to show how this works. So, I'll just go ahead and edit this. And we're just going to put in this popup.css one small style here on the h1, we're just going to make it so that the color for our text is basically going to just be blue. So, we'll just put that in and then we're just going to go into our popup.html and we'll just add a reference to our style sheet. We'll do this just like you would for any other HTML page. We're just going to do a link rel=stylesheet and then type=text/css. And then the actual href for this. And we're just going to put popup.css. Now, one thing to note here, is that we are doing this relative because everything is in the same directory. So, whenever we're referencing something, we're just basically referencing it without any kind of path here. It's just a relative reference. So, this should reference our CSS. So now, if we go ahead and save this, we can go ahead and open up a Chrome browser. And inside here if we click on our pop-up, now you can see its being styled, it's coming up in blue. And we're going to get into this more when we look at the Chrome developer tools. But, I do want to show you, real quick, that if you wanted to use the Chrome DevTools on this, the easiest thing to do is just to go to Inspect element. And then you can see it'll pop-up a little version of the DevTools that's basically targeting this. It's not the actual page itself. You just bring up the Chrome DevTools on the page; you're not going to see the right thing. But you can use this to do some debugging and like I said in the last module, we'll get into this much more.
A Browser Action Extension
Hi, this is John Sonmez from Pluralsight, and in this module we'll be creating a Browser Action Extension. In the last module, we also created a browser action extension, but it was pretty simple and didn't really use any of the chrome APIs. This time, though, we'll be expanding on what we learned from our first extension and be building a more robust extension that uses the chrome storage APIs for storing and syncing data. The browser action badge has an options page and even uses an event page that runs in the background to register for events. By the end of this module, you should have a pretty good idea of how to create a more complex browser action extension and be familiar with some of the capabilities of the chrome API.
What We Are Building
We're going to be building the famous Protein Tracker Application that's able to track a user's protein total versus the goal they set. We'll be basically building a simple application in the form of a chrome extension. The idea of this extension is that a user should be able to click the extension to see the protein total and goal, and then be able to add protein to their running total from that user interface. The user should also be able to get to an options screen where they can reset the total and set a goal. And the extension should provide notifications to the user when they reset the total or achieve their goal. We'll even add the ability for a user to add protein to their total by selecting a number on a loaded page and selecting ‘Add Protein' from the right-click context menu.
Breaking It Down
Let's break down the steps we're going to take to create this chrome extension. First, we'll start off by creating our Extension Directory and the manifest file for the extension. We'll do this in a similar way as we did in the last module. Then, we'll design the main UI for the popup when a user clicks the Extensions icon from the toolbar. This UI will have a current total and goal displayed, as well as give the user a place to add a protein amount to the total. Next, we'll add the ability to actually save the total and display the correct total in the popup UI. We'll utilize the Chrome Storage APIs to save and retrieve the saved data. After that, we'll create an options page for our extension. The options page will show the current goal and let the user change the goal and save it or reset the current protein total. Then, we'll add some notifications to the extension; we'll do this by using the Chrome Notifications API, which allows us to pop up a small notification at the bottom of the screen. We'll add a notification for when the user resets the total and also one for when they have met their goal. After that, we'll use the Chrome Browser Action API to add a badge to our Extension icon that will display the current protein total. In order to do this, we'll need to register for any changes to the protein total, and since we want this functionality to work regardless of how the total is updated, we'll use an event page to implement this functionality. Finally, we'll use our event page again to register a context menu item that will allow a user to add protein just by selecting a number on a page and right-clicking, then choosing Add Protein. That's it; quite a bit of functionality in this extension, but it's actually pretty easy to implement using the chrome APIs, as you'll see coming up next.
Creating The Manifest
So the first thing that we're going to do is we're going to create our directory that we're going to create our extension in, so I'm just going to create this directory called ProteinTracker, and inside here we're going to create our manifest file. So I'm just going to add a new text document and I'm just going to call this manifest.json and we're going to create this file just like we did for our first Hello World extension; I'm just going to go ahead and open this up in Visual Studio. And like I said, you can use whatever editor that you want and what we're going to do is we're just going to go ahead and set all the properties for this manifest file. So remember, there are a few things that we need to have - we need to have the manifest_version and this is going to be version 2 because that's the current version of the manifest, the latest version, and then we want to give this a name, which we'll have to specify, so we're going to call this Protein Tracker, and then let's go ahead and add a description. This one is optional, but we want to have a description, so let's say "Tracks a user's protein totals throughout the day." Then we're going to want the version for our actual extension, which we're just going to make this 1.0 to start with, and now we're going to want to add our browser action, because remember this is of type browser_action. In the next module we'll be creating a page_action one, but in this one we are using a browser_action, which means that it's going to show up in that toolbar always. And with this browser_action, we're creating a new object inside here, a nested object, so you can think of these as sort of subproperties. So we have our default_icon and we're just going to call this icon.png, just like we did before, and then for our default_popup, we're going to do the same thing as well and we're just going to call this popup.html. And that's all we're going to do for our manifest at this point. We'll be adding some things later to this manifest when we need to add some permissions and an options page and our background page, but for now that's all we'll need.
Creating The UI
So next we're going to go ahead and create our user interface, our basic popup.html, so we're just going to create a ‘New Text Document' and we're just going to call this popup.html and we're going to go ahead and open this one up in Visual Studio to edit it and what we want to do here is design the user interface for our main popup, so this will be when you click the icon for our extension, it should show this UI. We're just going to make a real simple user interface. You could, of course, make something more complicated if you want to, but we're just going to create an HTML document with our doctype html and then inside here, of course, we have our html and then our head and then our body. And what we're going to put inside here is we're just going to put in h1, that will say Protein Tracker, and then we'll add some h2's for everything else we're going to have in here. So let's have a total and then let's make a span here so that we can actually set this total to some value, so we're going to give this an id of total and we're going to set it to 0 by default. We'll do the same thing here for the goal, so we'll put Goal, and then we're going to add an h3 for ‘Enter amount.' So we'll say Enter amount and then we want to have an input that we'll call amount and this will be of type text. So that will let us have our little text input there and then we want a button for someone to go ahead and submit this to enter the values, so we're just going to make this addAmount and we're going to make the type equal to submit and then the value, this'll be what it says, it'll say Add Protein. Okay, and then we want to go ahead and add a title, this'll actually end up being a tool tip for our extension when you hover over it, so we'll call this Protein Tracker, and we're going to add some script files, but we're not going to add those yet, we're just going to leave this as is, and remember that little trick that I showed you in the last module - we can use that here to look at our user interface. In fact, I found that if you have two monitors, you can actually leave this open on one and then make your edits in your HTML and you'll see them change here automatically, so this is kind of a quick way to do a preview of your HTML and the nice thing about this is it works regardless of what editor you're using. So we have a real simple user interface; the basic idea here is that we're going to have the Total here that we can swap out, the Goal that we can swap out, the user should be able to enter some amount, and then be able to click this Add Protein, and it will make it so that it adds that amount to the total.
Loading The Extension
So at this point we're almost ready to go ahead and test out our extension to get it loaded into our browser, but before we do that we do need an icon, so I've already created an icon here, a very nice looking icon that says PT for protein tracker and this icon, remember, this is 19x19 pixels — this is the icon that's going to be displayed in that toolbar. So now we should be all set up to actually add this extension. So I'm just going to go ahead and get a browser window here and then I'm just going to go to Settings and Extensions, that's another way to get to Extensions if you forget the URL up here, and then we're going to go ahead and do a ‘Load unpacked extension' and we're just going to find where this extension is. So it's under here, Creating Chrome Extension, and then I've got this ProteinTracker. So now you can see that it immediately loaded up, we've got our nice little icon here, and then when we click it, we see our user interface; it just says Protein Tracker, Total: 0, Goal: 0, Enter amount — of course this doesn't work quite yet, but you should get to this step if you have everything set up correctly. You have to have your icon, you have to have the HTML. If you reference anything that doesn't exist, you'll have a problem loading this, so that's why we haven't referenced anything else in our manifest or in our HTML yet.
In order to be able to add protein to our total and display the current total, we're going to make use of the chrome storage APIs. We could, of course, just use the HTML5 local storage, but by using the chrome storage APIs we can automatically gain the ability to sync data and we can store whole objects instead of strings. We'll start off by causing a click on the Add Protein button to get the current total, if there is one, from the Chrome storage, and then add the entered amount to that total, then we'll save that total in the Chrome storage. We'll also add functionality to get the total from the Chrome storage as soon as our page loads and display it in the UI next to the total. We'll be using jQuery to make this all easier, but it isn't required.
Hooking Up To Click
Okay, so I'm here in the popup.js in the Editor and what we want to do here is we want to make it so that that click button does something, so that's the first thing that we're going to do is we're just going to test this to make sure it works. I'm just going to use an alert to show an alert box that shows that we've hooked up this click. So, we're just going to do our jQuery $(function, to have this function start or run when the page loads up, and then inside here we're going to hook up our event handler, so we're just going to do #addAmount and we're going to say when it's clicked, execute the following function, and inside here, all we're going to do for now is just we're going to say alert(‘clicked'). So now we just want to verify that this is going to work, so I'm just going to go ahead and open up a browser window and I'm just going to click this and then click the Add Protein button. You can see that it says clicked, so we know that we're hooked up correctly. You always want to take these small steps whenever you're doing something like this because you don't want to end up putting a lot of code in here and then trying to debug that; by doing this really small step, I know that this popup.js is being loaded and that it's hooking up to this click and everything is working. So now I'm ready to take the next step.
Adding An Amount
Testing The Total
All extensions can have an Options Page that can be accessed by right-clicking on the Extension icon. In order to create an Options Page, we simply add an entry to the manifest file that specifies the name of the HTML page to use as an Options Page. We can then create an HTML page that we want to display in a new tab when the Options Page is requested. We can implement any functionality we desire on this Options Page; in our case, we'll be showing the current goal and giving the user the ability to change the goal and save it and also the ability to reset the current total.
Adding Options UI
Adding A Notification
So next up we want to add some notifications. Right now when we click Reset in our options, it's not very clear to the user that their total was reset, and since this is a destructive action we should probably notify them in some way. So what we're going to do is we're going to use notifications to do that. So in order to be able to use notifications, we have to add a permission, so we're going to go to our permissions, and in addition to storage, we're going to add notifications. So this will give us access to the Notification API inside of chrome and then what we're going to do, it's going to be pretty simple, all we're going to do is in our options.js when we do this reset, instead of just doing this and forgetting about it, we're going to go ahead and do a callback, so we're going to pass in this function, and inside here what we want to do is we want to call chrome.notifications.create to create a notification. So we're just going to do this var opt to make an object that's going to contain the options for our notification. We could do this inline as well, but there's a lot here so it's nice to create the object outside in a separate variable. So we're going to save that, first of all the type, and this is going to be basic. So there's a few different types of notifications, we're not going to get into the different types here, but you could check that out in the chrome APIs, and then we're going to set the title for the notification, which is going to be "Total reset!" and then we're going to set the message. So this is the message that will be displayed and we're going to say "Total has been reset back to 0." And then we can specify what the icon URL is, and in our case, we're just going to use the one icon that we have. It's going to look a little bit weird because it's going to blow it up, but you can create another icon if you want to, you can customize any of these things; in fact, you might want to have different icons for different types of notifications that you would use in your app. So then we're going to call chrome.notifications.create and here what we want to do is specify an id for that particular notification so we can uniquely identify it and then the options. So, we're just going to call this one reset for the id and then we're going to pass in our options and then we can pass in a callback, and I believe this one requires you to have a callback parameter, so we're just going to pass in an empty function, we don't actually care to have a callback in our case. So, now we should see a little notification show up at the bottom of the screen when we click the reset. Now this is only going to work, I believe, on Windows and on Chrome OS right now. I don't think notifications are implemented on the other operating systems and that may change by the time that you're listening to this course, so don't be surprised if notifications don't work if you're not using Windows or Chrome OS. Okay, so let's go ahead and go back to our browser and then remember we've changed the permissions here, so we're going to need to reload this. So let's go ahead and go into our extensions, and then we're going to go ahead and reload this extension, and then now, if we right-click here and go to Options and we click Reset Total, there you go, you can see this Total reset, Total has been Reset back to 0. And you can see it's blown up this icon, so if you actually had an icon of a larger size, this would show up a little bit better in here, but this is the basic way to create notifications, which this is a pretty useful feature of Chrome to be able to access these notifications. You can actually make it so that when a user clicks on that notification, it does something, maybe it takes you to an option page or something like that, and you can also update those notifications if you want through that API.
Okay now let's go ahead and add one more notification; we're going to do this in a very similar way as we did the last one. What we're going to do is we're going to create a notification when the total is equal to or exceeds the goal. So when the user has reached their goal, we want to show them a notification. So all we're going to do this time is we're going to go into our popup.js and then inside here where we're adding the amount, we want to check to see if the new total is going to be greater than the goal. So, we're going to need to get the goal, so we're going to go ahead and change this so we're getting the total and the goal. And then we're just going to simply do a check here, so we're just going to say, if(newTotal >= items.goal), then let's go ahead and show a notification that says that they've met their goal. So let's go ahead and copy this and change this. And we still want the type to be basic; we're going to say here "Goal reached!" and then for our message, let's go ahead and make this be "You reached your goal of" and then let's put here items.goal and then an exclamation mark. So then we're going to still use this icon.png; again, you could use different icons for different notifications if you wanted to. And then we want to actually do the notifying, so we're going to call chrome.notifications.create and then we'll give this an id. For this one, let's call it goalReached and then we pass in our options and then a blank function, because we're not going to do anything when this completes. So now we can go ahead and save that and let's go ahead and open up our browser and now let's see what we have — we have a goal of 150. So, if we put in an amount of, let's say 100, we get a total of 100, but now if I put in 60, you can see "Goal reached! You reached your goal of 150."
Adding Event Page
Okay, so now to do the next step, which is we're going to basically add a badge that's going to show what the current protein count is; we're actually going to make use of an Event Page. So the way that we do this is we have to go to our manifest, and inside here, we can specify the background, and this is called background because there used to only be background pages and now background pages and event pages are specified here. So, what we're going to do is we're going to create a background property, and inside here, we're going to create an object that has our options. So we put our scripts in here and this is going to be an array of the scripts that are going to be loaded; we're just going to make our script called eventPage.js. And then we need to specify whether this is persistent, so we're going to say persistent equals false. Now if you made persistent true, it would actually be a background page; by making persistent false, it's an event page. So it's not going to live forever, it's only going to be invoked when it's needed. Basically what we're going to do with our event page is we're going to register some event handlers, we're going to listen for certain things, and that's what we're going to do in that script, and then it will get invoked whenever those events fire. If you just use the background page, you would have it running all the time so you wouldn't necessarily have to listen for a specific event; you could have that page going pretty much all the time in the background. And there are some cases where you'd want to do that, but in most cases you want to try and use the event page instead because it's going to take up less resources. So, now the next thing we need to do is to go ahead and create this eventPage.js. So let's go ahead and do a ‘New Text Document' and we'll just call this eventPage.js. And now let's go ahead and implement that functionality.
Adding A Badge
I've got our eventPage.js file open here and what we're going to put in here is anything that we want to run as soon as our extension loads up. So, because this eventPage.js is only going to run one time when our extension loads, we're going to want to add any kind of listeners or event handlers in here, we're going to want to subscribe to any events that we're interested in, and then set the callbacks so that those events when they're triggered will call our code. So what we're going to do in this case is we want to find out when the Chrome storage has changed, so we're just going to do this chrome.storage.onChanged.addListener. And again, I found out about this API through the Chrome API documentation that I had shown you earlier in module 1; you can find all of the documentation on each one of these APIs there, but what this API will do for us is it will allow us to basically get a callback whenever anything changes in the storage for our extension. So, we can specify a function to be called back, and in this function, we are going to get back an object called changes, and this object is going to contain anything that's changed, and it's going to give us the old and new values. So, let's go ahead now and utilize this to be able to set the badge text for our browser action. So now we're going to call chrome.browserAction.setBadgeText and this particular API allows us to change that text or basically add a badge to our browserAction, that little icon for our extension in the toolbar. And what we're going to pass in here is basically just an object that is going to have the text that we want to set. So we're going to have a text property and then we want to pass in a string, so we'll do changes.total, that's going to get the total from this changes, if the total has changed this will have a value. And then newValue is going to get the new value and we're going to have an old value and a new value for anything that's changed, and then toString to make this a string. So that's it; now what should happen is our event page is going to run, it's going to run this code, which is going to add this listener, which will give us this callback for this function that's going to set the badge text whenever anything in storage changes. We know that when something in storage changes, it's going to be --- either our total or it's going to be our goal, so we can be pretty sure that setting this badgeText will be the correct thing to do. Okay, so now we're going to open up our browser and what we want to do here is we want to reload our Protein Tracker. We need to do this because we've added that background page or event page in our manifest, so we need to re-read this manifest. So now we should be able to go to our Protein Tracker and if we enter an amount, let's say we add 12 more to our protein, then you can see that our badge shows up and it says 172 here, and whatever we change this to, that badge should get updated. And if we even reset this, so if we do Reset Total, we can see that our badge gets updated to 0.
Adding A Context Menu Item
Okay, so the last thing that we're going to do is we're going to make a context menu item to be able to add protein by highlighting some text and then basically selecting the Add Protein Option and we're going to utilize the event page to do this as well. So there's a couple things that we're going to need to do. First of all, we need to be able to use the menu or to add to the menu, so we have to go back into our manifest.json, and inside here, what we want to do is add a permission for the menu. So we're going to do a permission here for contextMenus. Now, we can go into our event page, and inside here, we're going to create a new menu item and then we're going to register for an onClicked on the context menu. So let's go ahead and add this above here. So we're going to create a variable called menuItem and we're going to set this equal to an object that we'll create here that will have an id, which will be equal to addProtein. This is how we'll uniquely identify our menuItem that we're going to add. Then our menuItem will have a title, it will be called addProtein, and then it will have certain contexts that it'll operate in, and again, you can check the API documentation to find out what all the contexts are, but we want this to operate on selection. So this is going to basically appear on the context menu when some text is selected on a page and only in that instance; it's not going to appear if you just right-click without selecting anything. So now all we have to do is call chrome.contextMenus.create and we're going to pass in our menuItem. This will make sure that our menuItem gets added to the contextMenus, but it's not good enough just to add that, we need to create an event handler so that we can listen to any onClicked event or any time a menuItem is clicked. So we're going to do chrome.contextMenus.onClicked.addListener. So now we're going to specify a function that has clickData and we're going to basically execute this function whenever a context menu item is clicked. So what we want to do here is first we want to check to make sure this is our menu item, so we're going to say if(clickData.menuItemId == "addProtein". So if it's our menuItem &&, we're going to make sure that there's actually some selection text, so let's do clickData.selectionText. So as long as we have some text then we're good to go. And the way that I know what's available on clickData is, again, you can check that API documentation for the chrome APIs, and for the onClicked, it shows you what clickData has in it. There's a bunch of different properties that you can get about the menu item. So now what we want to do is we want to make sure that this is a number, so I'm going to actually use the regex here; I'm just going to say intRegex. There's a lot of different ways you can check for a number, but this is a sure way to make sure that you have a number. And then we're going to go ahead and say, if(intRegex.test, that'll test to see if whatever we passed in here conforms to this regex, and we're going to get clickData.selectionText. So we're actually going to get the text that's selected. So if that is a number then what we want to do is create a variable called newTotal, but before we do that, let's go ahead and do a get on the existing total. We're going to create some logic sort of like what we created before when we added the amount to the total, so let's do our chrome.storage.sync.get and then we want to get the total, and then we're going to specify our callback here, so we're going to say function(items) and then inside here we're going to say var newTotal = 0 and then we're going to check if(items.total. So if there is a total, then we'll go ahead and do newTotal += parseInt(items.total), so we'll go ahead and add that to our new total. And then we can do a newTotal += parseInt(clickData.selectionText), so we know that the selectionText is actually an integer, and if that's the case, then we can just add that to our new total. So this is going to effectively increment our total by whatever the text that's selected, by whatever that number is. So then we just need to save this, so we'll do chrome.storage.sync.set, and then we'll create our object here with the total property and we'll set it equal to newTotal. Okay, so that should be it. Now this should run when our event page runs, so we'll end up getting this contextMenus.create, that'll create our menuItem, and then we'll subscribe to this onClicked for contextMenus.
Testing Context Menu
Okay, so now let's go ahead and open up a browser window and then we're going to need to reload this. So let's go ahead and go to our Extensions. And since we changed the permissions, we're just going to do a reload here, and then now we should be able to go ahead and use our context menu. Now if I right-click here, you're not going to see anything — you're not going to see it unless I am highlighting some text and then it will have a number to use. So let's do something like search for calorie counter. And maybe we can find some food nutrition data, this would be a good usage for this, so let's say burger, and we can go in here and we should be able to find something like protein, there we go, 22.3 grams. Let's just highlight our 22 and then I can right-click here and click Add Protein and you can see the 22 appeared. We've added 22 to our total. So this will work, I could grab, for example, this number 145, right-click, and do Add Protein, and you can see that that total's updated here now as well.
The extension we created in this module had a lot more functionality than our first extension. We made use of many useful chrome APIs, like the Storage APIs and the Notification APIs, and we even used an event page to be able to register for events when our extension first loaded, but in many cases, you'll want to create an extension that is not visible on the toolbar for every page, because it may not apply to every single page. In those cases, you can use a Page Action Extension to just show the action that is available for a certain page. We'll be using a combination of a page action in content scripts to implement our next extension. Thanks for joining me, and take care.
A Page Action Extension
What We Are Building
As a Pluralsight author, I've often found the need to be able to get a count of how many courses authors have produced and sort some of the course data from the Pluralsight website. I like to see how well my courses are doing in the Top 100 and be able to see things like, what the longest courses in the library are or the shortest ones. I've always thought it would be nice if I could see the number of courses that an author has in the Top 100 or overall how many courses they've produced next to the author name, and I've also wanted to be able to sort the columns in the table that displays the courses. We're going to be building a chrome extension that will allow us to do both of those things. We'll be creating an extension that will add a little icon like the one you can see here in the address bar whenever there is a Pluralsight page that has course content. We'll then be able to click that icon to see a list of helper commands we can run on the page. I think you'll be pleasantly surprised at just how easy it is to get this working.
We talked briefly about page actions in the first module, but I wanted to go over them one more time here now that we have seen browser actions and can better understand the difference between the two. As you can see here, a page action, unlike a browser action, shows up in the address bar and it isn't always there. In fact, by default, the page action doesn't show up at all; you have to explicitly call into the Chrome API to tell Chrome to show a page action. This is the key difference between the two. Other than that, the only major difference is that a page action can't have a badge like we had added to the Protein Tracker to show the total protein count. We can create a UI for the page action, just like we could for a browser action, as you can see here. When creating a chrome extension, it's important to realize when it makes sense to use a page action instead of a browser action. It is best to make an extension that only works in a subset of pages or websites, a page action in most cases, because it doesn't end up taking a valuable screen real-estate in the toolbar when it isn't needed.
Creating The Extension
Okay, let's go ahead and get started. We're going to start just like we did with the other extensions by creating our extension directory first. So what I'm going to do is I'm going to create a new directory here called PluralsightHelper. And inside here, we're going to start off by creating our manifest file. So, we're just going to do a ‘New Text Document' and we'll call this manifest.json. Okay, and we'll go ahead and open this up; I'm just going to edit this in Visual Studio. Like I said, you can use whatever editor that you want, and we're just going to create our manifest file just like we've done before. And remember that we want to start with our manifest_version, which is 2, and then we're going to want to add our name here, so the name for this one, we're going to call this Pluralsight Helper, and then we want to have a description and we'll just make this say "Adds functionality to the Pluralsight website." And don't forget your commas. And then we're going to say that this is version 1.0 of our extension. Okay, now we're just going to start off by creating a page action, so I'm just going to go ahead and add this page action section right now to our manifest, so we're going to say, page_action, and we're going to do this instead of that browser action. We can't have a page action and a browser action; obviously for an extension it has to be in one place or the other. So then we're going to put in our default_icon and we'll just call this icon.png; I've already created an icon that we can use here, and then we're going to put a default_title in here; this'll be just a title of this page action, which will be Pluralsight Helper. Then we're going to add a default popup, so we're going to say, default_popup, and this works just like it did for the browser action; we're just going to call this popup.html.
Adding The Page Action
So next we're going to go ahead and create our popup.html. I'm just going to go ahead and create a file here and we'll just call this popup.html and we're just going to create our user interface, we're just going to make a really, really simple user interface, just like we did for our browser_action. So let's go ahead and put our doctype html in here and then add our html and then we'll add a head tag and we want to have a body tag. And inside our head, we'll just go ahead and put the title, which we'll call this Pluralsight Helper, and then for our script we're going to add jQuery just like we did before. Let me go ahead and copy this to get the exact name and we'll need to copy jQuery, of course, into our plug-in directory and then we're going to have another script, which will be our script for this page, which we'll just call popup.js, just like we did for the other extensions. And inside the body, we'll just put an h1 that says, Pluralsight Helper Options, and then let's add two buttons; we're just going to make one button with the id of courseCounts — this we'll use for our course counts, this will be a submit button, and we'll give it a value of "Add course counts" and then let's go ahead and copy this and we'll add a second button, which will be called makeSortable, in order to make the table sortable, and we'll call this "Make sortable." So that's it, just a very simple user interface; remember, this user interface is going to be displayed when we actually click on that page action. Now, when we first set up this extension, we're not going to see the page action; we're going to go ahead and install the extension at this point to make sure that our manifest file is correct and that everything is correct next, but before we could do that we do need to create this popup.js and make sure our jQuery is in the directory. So let's go ahead and do that real quick. We're just going to do a ‘New Text Document' and we'll just make a popup.js and we're not going to put anything in there yet and then we're going to go ahead and copy jQuery into our directory.
Adding The Extension
Showing Page Action
Content scripts do not have the ability to directly communicate with Background Pages or UI Pages or most of the other chrome APIs. In order for a content script to be able to do something like show a page action, for instance, or update a badge count, the content script has to use the chrome message API to send a message that another part of the extension is listening for. Most commonly, you'll use this messaging API to send single messages to and from content script using the chrome.runtime.sendMessage and chrome.tabs.sendMessageMethods, but Chrome also supports long-lived connections using ports, passing messages to other extensions, sending messages from web pages, and even messaging with native applications. In this course, we'll just be using the simple and most used approach of sending messages to and from content scripts though. We'll be using messaging to both send a message from the content script to the event page to tell it to display the page action and from the page action UI to the content script to tell it to make modifications to the page.
Adding Content Scripts To Manifest
Creating The Content Script
Testing Content Scripts
Okay, so it's time to test this out. Let's go ahead and reload our Pluralsight Helper. You can see we don't have a pageAction here, so that's good. I'm going to go to Pluralsight.com; I still don't see a pageAction — that's good. If I go to the Top 100 Leaderboard, there we go, we've got our pageAction, so it's just showing up when we're on those pages that match what that content script said. So, now if I go, for example, to let's say the blog, we don't see anything show up here, but if I were to go to an author page, let's go to Shawn Wildermuth, and now you can see that this shows up again. So a little tricky to get this working. We have a little bit of an indirection here, because we don't have the ability to really just have the matches for the pageAction itself and we need a way to display the pageAction, so we have to basically have a content script, that content script has to send a message to our eventPage, which is listening, which can then actually execute script that will show our pageAction inside of the correct tab, but once you have that framework in place, now it's pretty easy. Now we have access to be able to send messages from our content page to the rest of our extension and next we're going to make that go the opposite direction when we actually implement functionality. So we're going to make it so when we click these buttons that it's actually going to send a message the other way to the actual content script.
Okay, now before we move on, I did want to show you one more thing that you can do with content_scripts that's actually pretty useful. You can add CSS to style something with the content script; in fact, you can basically make an extension that just restyles some web page if you want. In fact, there are extensions that already do that. So all we have to do is we're just going to create a CSS file, so we're just going to create this Pluralsight_cs.css, and let's go ahead and edit this. And we're just going to make this make the author name bold and a little bit larger so it'll be easier to see. That should be pretty clear that our style is working if we see that on the author pages or the course list pages. So we're going to say font-weight is equal to bolder and then we're just going to do font-size: large. I'll go ahead and save this, we'll go to our manifest, and what we're going to do inside here is we're going to add CSS. So we can just put a comma here and then add CSS to this and then this is just going to take an array of CSS pages - we just have the one, which is Pluralsight_cs.css, and now if we go ahead and save this and we go to our Extensions; we'll go ahead and reload this Pluralsight Helper, and now if I go to Pluralsight and I go to, let's say, the Top 100 Leaderboard, you can see that the author names are now bold, and they're large. So I'm basically applying the style automatically to this page and anything that matches this, so you can see, of course, our UI is showing up here for our pageAction, but this is really, really useful to just be able to restyle something. In fact, you can take an existing website, maybe you don't like the way that it looks, and just create an extension that adds your own custom style to it, and it might actually be useful to other people who are using that website as well.
Hooking Up Course Counts
Adding Course Count Logic
Okay, so the next thing that we'll need to do is to actually make it so that our content_scripts has a listener to be able to receive the message. So we're going to go back into our content script and remember we were just sending this message before, but now we're actually going to do this chrome.runtime.onMessage.addListener, so this will make sure that we're listening for messages, and then we're going to have a callback — that'll be a function that takes a request and then a sender and then a sendResponse. Then inside here, we're just going to check to see what the message was, so we're going to say if(request.action == "courseCounts", then that's the one that we want to handle, so we will do something with this message. So we're going to actually implement the functionality to add up the courses per author and go ahead and change the DOM or change the HTML that's in that page to show the courseCounts next to the author name. Now I'm just going to copy some code that I had written before to do this and we're not going to go over this code, because this isn't really important to creating the extension, but it basically just goes through, finds out all the authors, it creates this map, and counts up each one of the courses, and then it's going to go ahead and modify the actual DOM to display the author name followed by the course count. Okay, so let's go ahead and test this out next.
Testing Course Count
Adding DataTable Plugin
Making Sorting Work
Okay, so now let's go ahead and implement the functionality. We're going to do this in a very similar way as how we did the previous one, so we're going to make this makeSortable button work. We're just going to go to our popup.js, and inside here, we're basically going to do the same thing, so I'm just going to copy this and paste this, and we want to make sure that we have the right id, it's makeSortable, so I'm going to copy here and paste this in here. So now when makeSortable is clicked, what we're going to do is we're going to send a message, except instead of sending the message courseCounts, we're going to send the message makeSortable. I'll go ahead and save that, and then on the other end we need to receive this message. So if we go to our content script, so this Pluralsight_cs, we'll go ahead and go there, here we're going to check for the other request.action, we're going to check to see if we have makeSortable, right now we're just checking for course count. So we'll go ahead and put another if here, so we'll just say, if(request.action == "makeSortable", then we're going to go ahead and make the table sortable. And the way that we're going to do this is we're going to grab the table; this table happens to have a class with the name course, so we're just going to check for this .course, which will give us our table, and then all we have to do with this jQuery plug-in for data table is just say dataTable, it's basically adding this method to the table class, and we can pass in some parameters as an object. And so we're just going to pass in this bPaginate and set it equal to false and what this will do is it'll make sure that it doesn't page our results; otherwise, it's going to page our results. We don't want them paged because we want to use the actual paging that's already in the Pluralsight pages; we don't want to page this by 10 rows, otherwise we won't get all the rows that exist. And that's it, that's how simple it is to add this functionality. All we're doing here really is we're just basically modifying the page, we're running this script from this message. So now we can go ahead and test this out.
Okay, so let's go ahead and reload our extension just to make sure that it is up-to-date. So we'll just reload this, and now if we go to, let's say, the Pluralsight New Releases page, and then we click on our page_action, we can click this ‘Make sortable' and you can see it's actually modified this table and now all of these columns are sortable, so we could actually sort by author, and now you can see that it's sorted alphabetically by author. We can still even add our courseCounts, so now we can see the actual courses that each author has done all on this single page. We can find out some interesting information, like what is the longest and shortest course. We can sort by duration here, so we can see that the shortest course is IronRuby by Example, and then if I were to sort the other way, the longest course is this Design Patterns Library and then Advanced BizTalk Server 2010. You can also sort by release date or the level. So, this is a pretty useful functionality that we've been able to add very easily. We can also do this on the popular, so on the Top 100 Leaderboard we could sort by author here just by activating this to make sortable, and now we have that functionality. So you can imagine, there's quite a few different things that you could use this for. You could create all kinds of functionality for different web pages and extend them with a chrome extension. Instead of trying to modify the web page or do something else, you can basically just add on and add your own code and add your own functionality and features. This is a really useful way to be able to utilize something that someone else has created and be able to add functionality to it without having to reimplement it.
Alright, at this point we've created several chrome extensions, utilizing most of the common functionality of chrome extensions. We've created a Browser Action Extension that's able to store data and add menu items and we just finished creating a Page Action Extension, complete with content scripts that let us actually change the way a website behaves and add functionality. With these basics, you should be able to figure out how to create an extension to do just about anything you want inside of chrome, within reason of course. But, what good is creating extensions if you can't debug them and get them deployed for other people to use? Up next, we'll be covering how to debug the chrome extensions we've created using the Chrome Developer Tools and how to package up our extensions and deploy them to the Chrome Web Store. Thanks for joining me, and take care.
Debugging And Deployment
Hi, this is John Sonmez from Pluralsight, and in this module we'll be learning about how to Debug and Deploy our Chrome Extensions. One thing you may have encountered while trying to create an extension is something going wrong and not knowing how to figure it out. Extensions operate mostly in the background, so they can be difficult to troubleshoot if you don't know how. Fortunately, debugging extensions is not that hard and we'll go through the process of seeing how to debug extensions we've created using the Chrome Dev Tools. And once you've got your extensions working the way you want, you'll probably want to be able to deploy an extension. I'll show you everything you need to know about packaging up your finished extension and either hosting it on your own website for distribution or putting it in the Chrome Web Store. By the end of this module, you should know everything you need to know to create, debug, and deploy chrome extensions.
Debugging Page UI
Using The Console
Debugging Background Pages
Debugging Content Scripts
Okay, and there's one other type of script, which we haven't talked about so far, which is a content script. Now these content scripts get injected into the page, so you can actually debug them directly from the Developer console for the page. So, for example, with our Top 100 Leaderboard, if I go in here and I go to Sources in the Developer tools, you'll notice that there is this Content tab. Inside here, these are the unique IDs for each extension. So if we look through these, we can probably find our extension. And you can see that our extension is actually this first one and you can see the scripts are loaded, including our Pluralsight_cs.js. So we can actually debug in here as well, so you just have to remember that the content scripts are going to be part of the page, so you're going to debug them like part of the page. For the UI stuff, you're going to either just right-click on this and do ‘Inspect element' or you can right-click and do ‘Inspect popup', and then for the background pages, you do have to reach that from the Extensions screen.
Going To An Extension Resource
Okay, so the last thing that I want to show you about debugging extensions is if you're trying to reach a page in your extension that's sort of hard to reach. You can always do this chrome-extension: //, then the extension ID, and then the actual filename, and then it will show up directly in the browser - you can just browse to this. So, for example, if we go to our Settings Extensions, you can see that each extension has this ID. So we can find, let's say our Pluralsight Helper, we could just replace this here, and then go to popup.html, and this will show up in here as well.
Chrome Dev Tools Course
Well as you can see, the ability to debug chrome extensions relies partly on your ability to use the Chrome Developer Tools. We don't have time in this course to cover all the features of the tools, but if you want to learn more about the Chrome Dev Tools, check out my course on using the Chrome Developer Tools that you can find here. In that course, I go over almost all the features of the developer tools and show you how to maximize your use of them. If you use Chrome a lot for web development, you should definitely learn more about the Chrome Developer Tools, because they can make your job much easier.
There are three main options for deploying your extension, we'll cover each of these in detail, but let's go over them from a high level first. The first option is self-hosted. With this option, you are creating your own extension package and putting it somewhere for users to access and install in Chrome. There are certain security requirements you have to be aware of for this option, but we'll talk about those in a little bit. Next up is normal Chrome Web Store deployment. In this case, you put your extension in the Chrome Web Store where users can either browse to find it or use a specific link to download and install it. Updates are also automatically handled in this case, just like Chrome updates happen automatically for the browser itself. Finally, we have a combination, where you put your extension in the Chrome Web Store, but you actually let users install the extension from your own site. In this scenario, you maintain control over the distribution of your extension, but you get the benefits in security of the Chrome Web Store hosting it for you.
Packing An Extension
Now let's see how we can create an actual extension package; right now we've been using our extensions just by pointing Chrome at a directory and it's been reading it from there, but you may want to actually pack your extension, either to do self-hosting or just to test it out, maybe you want to be able to give it to someone to be able to test it. So what we can do here is from Extensions, we can just click this ‘Pack Extension' and this is pretty easy. All we're going to do is just browse to where our Extension directory is, so in my case it's under here, and we're going to take, let's say, our Pluralsight Helper and we'll just click OK, and then when I click ‘Pack Extension', it's going to go ahead and it's created this .crx file and it's also created this PluralsightHelper.pem - this is my key file. This is important to keep because it is a private key that was used to sign this extension. So if I want to update this, I need to have this file. So let's go ahead and take a look here. Now on the file system you can see we have this crx and we have this .pem, and the crx file format is actually a zip file format that has a header that has some additional information in it as well. And now let's say that I made some changes to my extension; let's say that I update the version number in my manifest file, so let's go ahead and edit this real quick. And let's say we have a new version, we have version 1.1. So now I could just save this and then I'm going to want to update this, so what I would do is just do ‘Pack my extension' and then I would actually browse to this private key file, and now when I click ‘Pack Extension', it of course gives me a warning that there's already a cx file present with this name and I'm going to proceed anyway, and so now I have my updated extension. So that's how to pack it; it's really, really easy to do.
Self-hosting is not quite as easy as it used to be, as the newer versions of Chrome have made it more difficult to install an extension that isn't from the Chrome Web Store. As a result, you should only really use self-hosting if you have to, because it's more difficult and error-prone than the other options, plus it's less secure for users. Extensions, of course, can do many bad things, so it makes sense that Google would encourage using the Chrome Web Store for distribution, but if you do want to do self-hosting or you have to, here are some things to be aware of. First, you'll want to configure autoupdate in your manifest file. You can find instructions on how to do this here. It involves creating an entry in your manifest file, as well as creating another xml manifest that you use to indicate what the current version is and where to download the extension. This will ensure that your extension gets updated automatically. When using web store, you don't have to worry about this. Next, you need to allow your extension to be installed from your site. By default, Chrome blocks all extensions from being installed that don't have explicit permissions specified for the domain that extension is coming from. You could follow this link to see how to set those permissions for each operating system. This requirement is probably the biggest reason self-hosting is a hassle; it requires actually modifying the Chrome install itself. Next, you need to make sure you keep your private key that was used when you packaged the extension. This is required to update the extension. And finally, you can actually install an extension without the extra security change to the extension install source if it's manually done. This can be done by opening up the Settings page in Chrome and manually dragging the crx file into it. If you have to have your extension self-hosted and you can't modify the extension install source for the user's Chrome installation, you may need to resort to this approach.
So I just want to show you real quick what happens if you try to install an extension. So I'm going to go to our PluralsightHelper.crx and I'm just going to drag this right into Chrome here, and I'm going to go ahead and say Continue. This might harm my computer, sure, that's fine, and then you can see that it says "Apps, extensions, and user scripts cannot be added from this website." So, basically unless I have that permission set that we talked about, we can't even install this just by clicking this from a website. You can imagine if you downloaded this from a particular site, you wouldn't be able to run and install this, but what you can do is if you do have the Settings open in this Extension tab, then you can drag it into here and then you see this drop to install, and then it'll ask about the permissions and let you add it. So a user can manually add this and this is useful to know for testing if you're trying to test out your package; you can do it, you just have to go through here, but it's definitely not a route that most users are going to know about, so you don't want to really host a crx file on your site and then expect a user to read some instructions that are going to tell them to download the file, save it somewhere else, open up the Settings, and then drag and drop it. So, that's really the way that I think Google is pushing us to use the Chrome Web Store, but it's really not that bad as we'll see in a little bit when I show you how to use the Chrome Web Store; it's pretty nice and pretty easy to get an extension in there.
Chrome Web Store
Now deploying to the Chrome Web Store definitely has fewer pitfalls. All you need to do to deploy to the Chrome Web Store is log into the Chrome Developer Dashboard and upload the Extension directory. Even most of the details on the Extensions Product page are optional, although you should probably fill them out if you want someone to actually be able to find and use your extension. From the Chrome Web Store, you can even do a semi-private deployment by making it so your extension only is accessible through a direct link and it's not searchable in the store. I'll take you through the basics of this process next.
Uploading To Chrome Web Store
Alright, so let's take a look at the Chrome Developer Dashboard and how we would actually upload an app. So the easiest way to get there is probably just to type in chrome developer dashboard into Google, because you can see the URL here is chrome.google.com/webstore/developer/dashboard, so that's a little bit hard to type in. And when you go there, you'll need to authenticate with a Google account, so you can see that I'm signed in to my main Gmail account. And let's go ahead and go back to the Dashboard, and here at this Dashboard, you can see any of the extensions I've already published or apps, chrome web store apps, I just have the Pluralsight Helper, which I've already tried to publish, so I've already just put this out here and it can be accessed from a link and we have some information about the developer account and some basic settings you can modify. Now all you have to do is click this ‘Add new Item', and then it'll have you upload an extension or app and it says a .zip file, so one thing to make note of here is this first item - it says "Upload a ZIP file of your item directory, not a packaged CRX file." So you don't want to upload the CRX file, and part of the reason for that is because the web store's actually going to package it for you, and remember, we have this whole signing with the private key, well it's going to be signing it based on some security credentials on your Google account so that you won't have to actually include your own private key. Just by uploading your app or your extension through your account, Google will know that it's you. So, what we're going to do is we're just going to go to our directory and all we basically have to do in here is to zip this up. So I'm just going to go to Creating Chrome Extension, let's go ahead and do, let's say our Protein Tracker. So I'm just going to do a zip here, just ProteinTracker.zip, so now I have this zip file and all I'm going to do is choose this file. So I'm just going to go in here and we will find our ProteinTracker.zip, then we just click Upload, and then it will take us to our Edit Items screen where we can edit everything here, and it has pretty good descriptions. You can see that I don't have an icon so it's not showing my icon here. We can put in our detailed description, we can upload a new icon here, and it has all the details about the particular icon sizes. There's a lot here to pay attention to if you want to get everything just right, but it's really important if you're making an extension that's going to be downloaded by other people and you want to have it look nice, you'll probably want to follow all these instructions. Same thing with the screenshots; you can link to a YouTube video, which is probably a good idea to show how to use your extension. It also has these Promotional tile images; these are those images that you see in the Chrome Web Store; again, good if you're trying to market this. And then the tile previews. And then here is an important part — this is where you verify that this is an item for your website. So, it's going to show me any of the verified sites that I have connected with this account, so my simpleprogrammer.com, for example, I could use that here. I can also put a link to my website or to my Support in FAQ for this chrome extension if I have one here. Then you want to select a category and this can be whatever category that you have. Let's put this under Fun and then you can decide what regions you want your extension to be available in. The language; you do have to select a language. A lot of these other options are optional, you don't have to specify a lot of these things, but you do need a language. And then you can actually hook up your Google Analytics here. Now what this will do is this is going to basically just track the usage of this extension, but not the usage inside the extension. What I mean is you're going to be able to track how many people are downloading and using the extension, not actually what they're doing in the extension. And then we have any requirements that are specified in the manifest file and then this little thing for ads behavior. If you're injecting ads, that's probably not a good idea, but --- and then the visibility options here. Now this is going to control how you're going to be able to distribute this. So, the default is all Chrome Web Store users; that's going to make it so your extension is visible just in the Chrome Web Store. You can just say people with the link, which will hide it so that someone has to has to have the link. It's not a secure way of having your app be in the web store — you can't count on no one being able to get access to it that you don't allow, but this is a way to; for example, if you have a company extension but you want to distribute it through the Chrome Web Store, this is a great way to do it because it's not going to show up when people search for it. And then trusted testers; you can set up tester accounts that you can manage from that Developer Dashboard and you can just set this up just for people to be able to test it. So then all you have to do is you can either Save draft and return to Dashboard or you can just preview it or publish it right here. So we could actually save our draft and we could click Publish if we want to publish this; I'm not going to publish this at this point, because we don't really want to actually publish this, but that's pretty much it. It's really simple, really easy to get this setup and to get an extension in the Chrome Web Store.
Well we've finally reached the end of this course. We've covered many of the features of Chrome Extensions and seen the power of Chrome Extensions as we've created our own extensions, both Browser Action Extensions that are always available and Page Action Extensions designed to work on certain pages or certain conditions. We also saw how easy it is to use the Chrome Extensions to modify an existing page and finally how to debug and deploy them. I hope you've enjoyed this course. I really like how easy it is to use and create Chrome Extensions and I find that they're really powerful ways of extending Chrome and even adding extra capabilities to web pages that you wouldn't otherwise be able to alter. Good luck creating your own Chrome Extensions, and thanks for watching! Take care.
John Sonmez is the founder of Simple Programmer (http://simpleprogrammer.com), where he tirelessly pursues his vision of transforming complex issues into simple solutions
Released11 Sep 2013