What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy 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 Description Transcript Exercise files Discussion Learning Check Recommended Introduction Introduction 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 One of the nice things about Chrome extensions is that they're actually very easy to create. Chrome extensions are made using web technologies you're already probably familiar with like, HTML, CSS, and JavaScript. That means that just about anyone with some basic web skills, regardless of their primary programing language background, or choice of technology stack, can learn to create Chrome extensions. You'll need to be at least somewhat familiar with HTML, CSS, and JavaScript to get the most out of this course though, since we won't be covering the basics here. Other than that small requirement, this course is basically for everyone. It doesn't matter if you're a .NET developer or Java developer or even prefer Ruby or Python. Since Chrome extensions only use the web technologies, everything in this course will apply equally well. Another benefit of Chrome's easy to create extensions are that you can learn to create extensions for a variety of different reasons. Unlike some technologies that require deep understanding of a framework and lots of study. The simplicity of this topic opens up the possibility of creating Chrome extensions for just even personal use. Plus, as an added bonus, you'll look like a genius when you show your boss the Chrome extensions you made over the weekend for your specific software. What This Course Will Cover This course is broken up into five modules which will take us through the basics, the creation of three Chrome extensions, and then finally, the important issues of debugging in deployment. We'll start with the first module which you're currently watching in which we'll discuss the basics of Chrome extensions and how they work. And discover just how much you can actually do with some simple JavaScript code thanks to Chrome's extensive APIs. Then in Module 2, we'll create our first extension. This extension won't do much, it'll be a basic Hello World extension, but it will give us a chance to go over the basics of the mechanical process of creating an extension and learn how the different technologies and pieces fit together to create the final Chrome extension bundle. This module should help you gain the confidence that creating an actual extension itself is pretty easy. Once we have created a basic extension, it'll be time to do something a little more useful. In Module 3 we'll create a browser action extension which is just an extension that will give an icon in the browser that can be clicked to display a UI. You've probably seen many of these types of extensions before because they are the most common and most obvious types of extensions. Then in Module 4 we'll create a page action extension. This kind of extension runs in the back ground and modifies a web page by adding capabilities to it. It isn't as prominent as a browser action extension, but it is a very powerful capability of Chrome extensions that can do some pretty awesome things. In Module 5 we'll learn two important things about Chrome extensions. First, how to debug them using the Chrome developer tools, and then how to deploy them. We'll see how we can package up a Chrome extension and submit it to the Chrome Web Store so that others can download it and make use of it. What Is A Chrome Extension Let's start off by talking about what exactly a Chrome extension is. Chrome extensions really can be thought of as the way Google provides for extending the capabilities of Chrome. Extensions are often confused with plugins which are quite different. Many developers mistakenly confuse them as the same, but in a minute I'll show you the difference in Chrome itself. There is quite a bit of debate across the web about the actual differences, but the easy way to conceptualize it is to think of plugins as running outside of the sandbox context of the browser and interacting with the browser. Extensions on the other hand, run within the browser and conform to a specific set of APIs and capabilities exposed by Chrome. This isn't to say that a Chrome extension can't ever do anything bad and it completely safe, but you have a lot more assurance with most Chrome extensions that they're going to be safe to run, especially if the extension is obtained from the Chrome Web Store. Chrome extensions can be used for a variety of different purposes and can behave differently. But, in general, Chrome extensions somehow expand the capabilities of the browser. This could be through the creation of a sort of in-browser app that's accessed from the Chrome toolbar, complete with its own UI, through injecting JavaScript into loaded pages, or even changing some of the default behaviors of Chrome. 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 As we talked about earlier, Chrome extensions use common web technologies like HTML, JavaScript, and CSS to extend the capabilities of the Chrome browser. Chrome extensions work by extending the capabilities of Chrome via some extension points which are defined in a manifest file that comes with extension and through the use of JavaScript Chrome APIs. A Chrome behaves sort of like a JavaScript application that Chrome runs and evokes at certain points which the developer of the extension can specify. Chrome extensions can even run in the background and listen for events to trigger them. Here is the basic process of how Chrome extensions are created and added to a browser. Fist, a developer creates the extension using a combination of HTML, JavaScript, and CSS. There are many ways these three technologies can be used to create an extension. And a developer has access to many of the internal capabilities of Chrome through the Chrome APIs which can be accessed from JavaScript. Then the HTML, JavaScript, and CSS files are packaged together with a manifest file that specifies important information about how the extension should work and what files it contains. This is all packaged into a zipped file with the .CRX extension. Typically, at this point, the CRX file is deployed to either the Chrome Web Store or some other location that users can access and download the extension from. We'll cover how to do this in the last module. Then finally, the extension is installed into the user's browser. Chrome automatically recognizes the .CRX extension and knows how to unpack it and read the manifest file to determine how exactly to integrate the extension into the browser. At this point, the extension is completely installed on the user's machine and integrated with the browser. This is important because it's a common misconception that Chrome extensions run from the web. Because they seem to magically appear when you install Chrome on another computer and sign in with your Google account. And that's it! At a very basic level Chrome extensions really are that simple. What Extensions Can Do Okay, so now you know what a Chrome extension is and a bit about how Chrome extensions work. But, what exactly can you do with a Chrome extension? Chrome extensions are actually very powerful and can do more than you might think. Let's go over some of the obvious and the not so obvious things you can do with a Chrome extension. First of all, you can interact with web pages in the browser or external web pages and/or other servers. This means that you can have an extension interact with APIs or other services to perform its functionality. You aren't restricted to just what you can package in your extension file. You can also control many of the browser features available in Chrome. We'll take a look at the Chrome APIs in a minute, but there're pretty extensive and really lets you do a lot more than you might have thought possible. For example, through the Chrome APIs you can access things the Font settings, Tabs, Downloads, and even History. You can also add your own UI to Chrome through the use of either a Chrome Browser action or Page action. Browser actions show a button on the Chrome toolbar that can be pressed to display a custom UI. And page actions can put icons in the address bar that can be clicked to access a user interface for actions specific to that page. In addition, your extension can have its own options page where it can be configured through your own custom UI. Extensions can modify loaded pages by injecting JavaScript into the page to add capabilities to the page or even change the UI of it. You can also use extensions to add context menu items to the right-click context menu in Chrome. Finally, Chrome extensions can actually load DLLs. Although this is something you typically want to avoid since it's pretty dangerous and causes an extension to leave the safe sandbox environment of Chrome. Doing this actually creates a real plugin using the NPAPI, but we won't be covering that in this course. Chrome APIs 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. Background Pages Chrome extensions can be generally broken up into three main parts. A background page, UI pages, and content scripts. Let's talk about each one of these important components in a little more detail. First we have background pages. A Chrome extensions can have a background page which is basically an HTML page that runs in the background. Typically, a background page will have some JavaScript code in it that will be used to control the capabilities of the extension when it's active from the Chrome UI. You can actually see a list of the background pages running from Chrome using the Chrome Task Manager as you can see here. Background pages can either be persistent or event pages. Persistence background pages are always running in open. This can be necessary when you have a background page that stores some persistent state for your extensions or handles some long running process to manage a task. But, background pages can be resource hogs so they should be used carefully. Often a better approach is to use an event page which is only loaded when it's needed. Event pages work just like background pages, except that they don't persist themselves all the time. Instead, an event page is registered for a specific event which will trigger it and cause it to become active. 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. UI Pages UI pages are just HTML pages that display a UI for an extension. If you've installed any Chrome extensions, this is probably the part of an extension you're most familiar with because it's the most visible part. A UI page is usually displayed when a user clicks the extensions icon in the toolbar. Browser actions which are the Icons that appear in the toolbar can have a pop-up which is an HTML page that's displayed when the browser action's clicked. Option pages can also be specified to customize an extension. UI pages can even override default pages in the Chrome browser or be displayed dynamically by JavaScript code in the extension that opens a new tab or window. UI pages in an extension can access and manipulate each other by changing properties on their DOMs. UI pages can even invoke functions on a background page, if needed. Content Scripts Content scripts are scripts that are executed when certain pages load in the browser. These scripts can be used to essentially inject JavaScript into a page to modify its behavior or user interface. The content script essentially becomes part of the page that was loaded. This means a content script is going to behave like any other script on the page. So, content scripts can't directly modify the DOM of the HTML pages packaged with the extension, like UI pages and background pages can. But, content scripts can send messages back to the parent extension to ask pages in the paired extension to modify a UI page or perform some extension-related functionality. Likewise, a background page or UI page can send a message to a content script to cause it to perform an action on the page it's running on. We'll look more at content scripts when we utilize them to implement an extension in Module 4. Up Next So now you should have the basic knowledge about Chrome extensions needed to create our own extensions. Chrome extensions are basically just a collection of HTML, CSS, and JavaScript packaged with a manifest file that tells Chrome how to integrate their functionality into the browser. But, as we talked about in this module, extensions are pretty powerful and can utilize the Chrome APIs to control and manipulate many aspects of the browser. We also talked about the three parts of the Chrome extension; the background pages, UI pages, and content scripts. But we'll be looking more in depth into each of these as we utilize them and some of the extensions we'll be creating later in this course. Up next, we'll be creating a very basic Hello World extension to see how all the technology of a Chrome extension works and get you familiar with working with extensions before we get into the details of the Chrome API or the JavaScript code used to interact with it. Thanks for joining me and take care. Hello Extension Introduction Hi, this is John Sonmez from Pluralsight and in this module we'll be creating a simple Hello World extension for Chrome. Chrome extensions themselves are pretty easy to create. But, all the extra JavaScript and functionality inside of an extension can make it seem much more complex. To avoid any of this complexity, we'll be creating a very basic browser action extension that just shows a basic UI where a user can type in their name and see it echoed back to them with a greeting. This basic extension will help us understand how extensions are put together and get us some experience with going through that process before creating a more complicated extension like we'll do in the following modules. By the end of this module you should understand the components you need in order to create a Chrome extension and know how to add an extension you're developing to an instance of Chrome to test it out. Extension Components Extensions can be as simple as a single manifest file and an HTML or JavaScript file. But, most extensions will make use of several different kinds of files to create the desired functionality. To start creating an extension you just need to create a directory in which you'll put all the files that extension will use. In this directory you'll have to at least have a manifest file which is a JSON formatted file that describes the properties of the extension. If your extension is going to have a user interface, you'll probably need to include one or more HDML files in the directory as well. Extensions can also have icons which are used in the Chrome store and the manage extensions tab in Chrome and to display the extension in the Chrome toolbar. Those icon files should also be included in this extensions directory. JavaScript files, CSS, and Images or any other files needed by the extension can be included in there as well. Everything in the directory can be referenced using relative paths starting from this directory. So, the Chrome extension directory is like a self-contained HTML application. 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 So, the first thing that we'll need to do to create our extension is to go ahead and create a folder that we're going to create the extension in. So, we're just going to create a folder here called Hello World. And inside here we're going to place all of our files. And the file that we're going to start with is our manifest file. So, I'm just going to go ahead and create a New Text Document. And I'm just going to call this manifest.json. Now, let's go ahead and edit this. Now, you can edit this in any editor that you like. I'm going to go ahead and use Visual Studio. So, just go ahead and open up this file. And what we're going to do with this manifest file is we need to add everything for our extension. So, I'm going to go through this step-by-step. The first thing that we're going want is our manifest version, so I'm just going to do this in a JSON format. So, I'm going to say manifest_version:2 and then comma, and then we're going to add each property just like this. So, this manifest version 2 is going to specify that this is version 2 of the manifest.json format. And that's the version, the current version that we want to use. Then we're going to specify the name of our extension which we're just going to call this Hello World. And then we're going to specify what the description is, so we'll use this description property. And we're going to say this is my fist Chrome extension. And we're going to skip the icon for the actual extension itself at this point since we're not really going be installing this anywhere. But, we will put an icon for our actual browser action which we'll discuss here in a minute. So, after we have our description we want to put in our inversion. This one is required and we're just going to make this be version 1.0. And then in the next section we're going to make this a browser action. Remember that a browser action is going to mean that this extension is going to be a button that's going to be available at the Chrome toolbar and that's how we're going to activate this. So, in order to do this, we're actually going to make an object inside here that's going to have some properties. So, we're going to say browser_action and then we're going to use these brackets to indicate that this is another JavaScript object in this JSON or JavaScript object notation. So, you can think of this as sort of like sub-properties. So, for browser action we're going to specify what the default icon should be and in our case it's going to be icon.png. So, we're going to need to make an icon, and we'll do that a little bit later. And our icon will actually need to be 19x19 pixels. And then we want to specify what our HTML page that is going to be shown when someone clicks this browser action. So, we're going to say default_popup and we're going to set this equal to popup.html. So, we'll need to go ahead and create an HTML file called popup.html and put in our directory. So, that's all we're going to do for our manifest file. Just to recap this real quick, we have our manifest version, we've got our information about our actual extension including the name description and the version number of the actual extension, and then this browser action. Remember we could actually have a browser action or a page action or neither of those, but in our case we're using browser action which means that it's going to be one of those extensions that's going to appear in the toolbar and when we click it, it's going to display something. So, the icon it's going to show is going to be this icon.png and when we click it it's going to show this popup.html. So, we'll need to create that popup.html. And this is just a very, very simple manifest file, of course, like we had discussed you can add a lot more options to a manifest file. And you can check out that documentation on the manifest files to find out more about what is available. HTML Files Now, we can include one or more HTML files in our extension directory to be used with our extension. In our case, we'll be including a popup.html file which will be used to display the UI for our extension when the icon is clicked in the toolbar. HTML files used in extensions are just regular HTML documents just like you would define for any web application with one important exception; you can't include embedded script in the HTML file. This means you'll have to reference any JavaScript you want to use for your HTML page as a JavaScript file that contains a script. Other than that, there's no special restrictions imposed on HTML files that you use in your extension. 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. JavaScript JavaScript files can also be included in an extension. In fact, it'd be hard to give an extension much functionality without including some JavaScript to make it work. To use JavaScript in an extension, simply create a JavaScript file and include it in extension directory, then reference it either from an HTML page or the manifest file. Developers often ask if they can use external JavaScript libraries like jQuery in their extensions, and if so how to do it. It's actually pretty easy and straight forward. Just include the desired JavaScript file in your extensions directory, just like any other JavaScript file, and reference it from your HTML. Adding JavaScript Okay, so what we're going to do at this point is we're going to add some JavaScript. And what we're going to do is we're going to add some JavaScript to add this functionality that's going to make it so that when a user types their name into that input box, it's going to echo their name back and say Hi, and then whatever their name is. So, in order to do this, we're actually going to use jQuery, and then we're also going to use own JavaScript. So, the first thing I'm going to do is show you how to get jQuery added to our extension. This is pretty simple, all we're going to do is basically just go to jQuery. So, we're just going to the jquery.com. And then we're just going to download jQuery. And you can get whichever you want, the compressed or uncompressed; it doesn't really make much of a difference for an extension, so I'm just going to get the uncompressed version. And I'm just going to go ahead and do a Save as here. And I'm going to save this. And I'm actually just going to save this right to that folder. So, let's just go right into here in Hello World and we're just going to Save this. Okay, so now we have jQuery. And then the next thing we're going to do is create our own JavaScript file that we're going to utilize here. So, let's go ahead and do New, Text Document. And we're just going to call this popup.js. And we'll need to go ahead and add this functionality, so I'm going to edit this. And I've got Visual Studio open here and what we're going to want to do is include our jQuery file as well as our popup.js. So, we're just going to do this just like we would do in any normal HTML page. We're going to include our script here, right inside of the head. So, we're just going to say script src=jquery let's go ahead and get the correct name for this. So that will include jQuery and do remember with the script tags that you do have to use this closing script or you might have some problems. And then we're going to do another one and we're just going to say src=popup.js and that will include our popup.js. So, now let's go ahead and edit our popup.js. And what we're going to do inside this popup.js is we're basically just going to create some real simple functionality. I'm using jQuery here, you don't have to use jQuery if you don't want to jQuery. But, I do find it a little bit easier to create JavaScript functionality like this with jQuery. So, I'm basically setting this up so that this is going to run on document ready, this function that we're specifying here, and then what I'm going to do is I'm going to grab our element with the ID name which is going to be our input box, and I'm going to register an event handler for keyup. So, basically whenever you type into that box when the key is up, after you're done typing, it's going to execute this particular function. So, we're just going to create our function here. And inside this function, what we want to do is we're going to want to echo back that name. So, I'm going to go ahead and get our greeting which will be our h1, and I'm going to set the text=Hi comma space and then I'm going to do a plus here, and I'm just going grab that name again. So, we're going to get the text that's in there. So, we're going to say name.val which will get the value of the name and then we're going to add an exclamation. So, that's it. Some really simple functionality, not a lot to this, but let's go ahead and test this out. Now, the nice thing about testing this out is we don't actually have to reload this inside our browser. It's going to automatically reload for us. Testing JavaScript All right, so let's test this out. I've got a Chrome window open, and we're just going to basically click our extension. And when we do that it pops up, and now if I type in my name, you can see it says Hi, John! So, whatever I type in here, it's going to echo back to me. Pretty simple functionality, but this is really how easy it is to create a Chrome extension. And you could do whatever you wanted in there, you're basically just using some JavaScript and HTML. Now, we're not using really the Chrome APIs at this point. I'll show you a little bit about how to do that next and definitely in the next modules we'll be getting into that. But, you don't even really have to. You can basically create an app that's essentially launched from this button inside Chrome if you want to, if that's all that you need to do. Adding Style 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. Up Next Well, congratulations! You've created your first Chrome extension. I bet it was easier than you thought. The basic process of creating an extension is pretty simple as long as you create a manifest file and include the appropriate resources, Chrome does the rest for you. If you're already creating web applications using HTML and JavaScript, you'll probably find creating extensions to be extremely easy. But, this simple example doesn't really represent what a real extension is likely to look like. We weren't really interacting much with the Chrome APIs, and our extension isn't really implementing much functionality. In the next module, we'll create a more robust extension that does a little more than our simple Hello World extension, and makes use of more of the Chrome APIs. Thanks for joining me, and take care. A Browser Action Extension Introduction 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. Adding Protein 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. Setting Up JavaScript Okay, so now it's time to actually implement this functionality to be able to actually add some protein and to save that data, but before we can do that, we're going to need to go ahead and create our JavaScript files and bring in our jQuery. So what I'm going to do here is I'm going to link to our JavaScript and then we'll create that JavaScript file, so we're just going to say script src = and we're just going to call this popup.js and then we're also going to want to link our jQuery, so let's do a script src = jQuery and let me go ahead and copy this entire string. Okay, so now we'll need to add these to our directory. So let's go ahead and go to our directory and I'm going to go ahead and just copy the jQuery instance that we already downloaded before, so I've got the jQuery file already, and then we're just going to create a new file and we're going to just call this popup.js and then we'll need to go ahead and edit this and then create that functionality. 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 So what we're going to do next is we're going to make it so that when this is clicked, we're going to go ahead and check to see if there's a total already stored and we're going to use the Chrome Storage API and then if there is, we're going to add the amount that's in that amount box to that total. And if there's not, then we're just going to use the amount from the amount box and we're going to save that value. So, in order to do this though, we're going to need to modify our manifest file, because we need to add permissions to actually utilize the Storage API. You always have to add permissions for whatever you're trying to do, so we're going to add this permissions section and then we're going to actually use an array here, so we specify our permissions in this array, and each type of thing has a specific permission; you can find this in the documentation on the API. So that API doc that we had looked at before for the chrome APIs is going to say what permissions anything needs, and in this case, we need permissions to storage. So once we have that, now we can use the Storage API in our actual JavaScript. So what we're going to do here is we're going to start off by creating a variable that's going to hold the new total, but we're going to want to try and get the value first, and everything that we're going to do with the Chrome API is going to be pretty much using callbacks, because most of the API is asynchronous. So that's important to know is that you're not going to get a result back; if you're used to writing a lot of JavaScript code, that's probably nothing new to you, you're probably familiar with that, but if you're not, then you have to get used to this asynchronous pattern. So we're going to do chrome.storage.sync.get. Now, what we're using here is chrome.storage.sync; there's also a chrome.storage.local. The difference is that the sync is going to get the data, you can think of this from the cloud — it's going to automatically sync with other browser instances that you might have, so when you save and get data it's getting it from there. If you do local, it's just going to store it on the local instance. If there is not a connection, the chrome.storage.sync is going to basically degrade to the local. So, you probably want to use sync if you want to have data possibly be synced up; you only want to use local if you're sure that you only want it to be stored locally. So here what we're going to pass is we can either pass an array of strings or just a string for the key that we want. So, let's just do our total here and then we pass in a function and this function is actually going to return back the items, this is going to be an object, and it's going to have a property equal to each key that gets returned. So what we're going to want to do next is create a variable called newTotal and we're just going to set this equal to 0 for now, and then what we're going to do is we're going to check to see if(items.total), then we know that something came back or there was something stored. If this is false, we know that when we did the sync.get, there wasn't actually a total that was stored, so we're not going to try and get that value, but if there is a value in there then what we want to do is we want to set the newTotal += parseInt and we're going to parse items.total just to make sure that we get this as an integer. So basically all this will do is if there is a total stored, we're going to get it and that's going to be equal to our newTotal. Now, the next thing we want to do is get our amount. So, we're going to do our $(‘#amount') and we're going to be getting the value of this, so this is going to get our amount from our user interface that hopefully a user has entered in and we're going to check to see. If there is an amount, then we're going to do something; if there's not an amount, we're not going to try and add that amount to the total. So, if there amount, then we're going to say newTotal += and we'll do our parseInt again to make sure we get this as an integer and we're going to parseInt our amount. Okay, so now at this point we should have our total and it should take into account what the old total was, if there was one already stored, otherwise it's just going to be adding that amount to 0, basically storing a new total. So now we want to store this, and in this case, when we store it we don't really care about the callback, because we can just send this store and we don't care when exactly it happens, we don't need to do anything when this is done, so we're just going to do chrome.storage.sync.set and here we need to pass in an object and we have to set the properties. So this is sort of like the reverse of what we're getting from the sync.get. So we're just going to basically put here total and then we're going to use newTotal as the value for that property and that's it — that should store this. Now we're going to do a little bit of cleanup here. Let's go ahead and set the total text, because remember that we're going to have a new total here so we want to actually set the text in our user interface equal to the newTotal and then let's go ahead and do something to this amount, let's go ahead and blank this out. So we're going to say (‘#amount').val equals an empty string just to indicate that we've actually stored that newTotal, we've added that amount. Okay, then let's go ahead and end this function call, remember this is all inside of this function. So we have to use the correct syntax here and so now this looks correct. We're basically making it so that when addAmount is clicked, we're going to try and get the total, we're going to try and add that total to our newTotal, which starts out at 0, we'll add the amount if there is an amount, and then we're just going to store this newTotal, update the UI, and then blank out that amount. Testing The Total Okay, so now before we can test this we have to do something special here. With HTML and JavaScript, if you change those files, you don't really have to do anything because their changes are going to be automatically reflected, but since we've added a permission, we actually have to go here into Extensions and we have to click this Reload to reload the extension and that's going to make sure that it gets that new permission that is needed for it. So, now if we go to our extension and we type in an amount, click Add, you can see that it adds the protein, but you'll notice one problem here - so if we close our extension and then reopen this UI, it doesn't show us the total, so we can fix that real quick. What we need to do is load that amount when our page first loads. So, all we have to do is inside here we're going to go ahead and do a chrome.storage.sync.get and then here again we're just going to do this just like we did before, get our total, and then do function (items) and then inside here what we want to do is we want to basically just set the (‘#total').text equal to items.total. So now I can go ahead and save that and let's make sure that this is closed, and now if we open up our extension, you can see that the Total automatically is showing up and it's going to reflect whatever the current total is. Options Page 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 Okay, so next we're going to add an Options page. In order to do that, what we're going to need to do is to go into our manifest.json and we're going to have to add the entry for what the Options page is. Every single extension that we create can have an Options page; we just have to specify that as a property in our manifest. So let's go ahead and add this here and all we have to do is specify here options_page and then the name of what that options page is going to be, so we're just going to call this options.html, and then we'll go ahead and create an options.html in our directory. So let's go ahead and open our directory and we'll just do a new, in fact let's just go ahead and copy our popup.html to give us a bit of a head start here and we'll call this options.html, and then let's go ahead and open this up in our Editor, and now we can go ahead and implement our options. So, for our Options page, we're just going to make a real simple UI that's going to show what the goal is in an input textbox that the user can change that goal and then we're going to have a button for saving and one for resetting the total. So let's go ahead and change this title to Protein Tracker Options, and then for our script, we're going to include jQuery, but let's also include this options.js, so we'll have to create some JavaScript for our page and then we'll just call this Protein Tracker Options and then here let's go ahead and leave our h2, and instead of having a span here, let's go ahead and put an input. This way we'll have our input here that someone can enter the goal amount and we can save it from getting it from this input. We'll want to change this id as well, so let's make this id be goal and then let's go ahead and add our buttons, so we're going to have one button for saving, so we'll give this the id of save and we'll give a value here of Save, and then let's add another button right below this, which we'll call our reset button and the value for this one will be Reset Total. So now let's just go ahead and check out our UI here in our Explorer window. So if we go ahead and open this up, we can see that this looks okay - not the prettiest user interface, but this should work for our Protein Tracker Options. And then we're going to need that JavaScript file as well, so let's go ahead and we're just going to copy and paste this one and we'll call this one options.js. And then we need to implement this functionality for our options, which we'll do next. Adding Options JavaScript Okay, so let's go ahead and clear out some of this that we have in our options.js so we can implement the logic we want here. Now, the first thing that we're going to want to do is we're going to want to populate that goal input if we have a goal, so we're actually going to change this; instead of doing chrome.storage.sync.get total, let's go ahead and say get the goal. And then here we have a goal input and we're going to change the text, and in this case since it's an input, it'll be the val, so we'll change the value equal to items.goal. Now if there isn't already a goal saved, then that's fine - it's not actually going to do anything. So then the next thing we're going to do is we're going to hook up the Save button. So we want to go ahead and say when you click the save button and execute this JavaScript function, and inside here, what we want to do is we want to go ahead and save that goal using the chrome storage. So let's create a variable goal and we're going to set this equal to whatever the goal text is, so we use this val to get that, and then if(goal), so if there's actually something entered there, then we can go ahead and do chrome.storage.sync.set, and then remember here we pass in an object, so we just specify whatever properties we want for this, we want it to have a property called goal, that'll be our key, and then it'll be equal to whatever the goal is, and then we're actually going to create a callback here. So when this finishes, when it's done saving, then we're going to go ahead and close the browser window, or rather, we're going to close the tab; so we're going to do close here, so that should close that tab. Then, there's one more thing we want to implement, we want to implement this reset functionality. So let's go ahead and do that as well, so we're going to say (‘#reset').click and then here we're going to pass in a function, and inside reset what we're going to want to do is for now all we're going to do is we're just going to reset the total, so we're basically going to do chrome.storage.sync.set, and then we're going to set the total property equal to 0. Now later on we'll actually make this show notification, but for now we're just going to set the total to 0. So let's go ahead and test this out next. Testing Options Okay, so in our browser now, if we click our extension, we've got our Protein Tracker UI coming up, and if we right-click here, we should be seeing Options. Now we're not going to see Options just yet, because we haven't reloaded this plug-in. Again, we've changed the manifest file so we do need to reload this, so let's go ahead and go to reload here and now if we right-click here we see Options and when we click that you'll notice it opens up a new tab that has our Options. So now we can type in a Goal, let's say we put in 100, and if we click Save, it closes that. Now we don't have this Goal showing up here; we'll need to implement that functionality, but our Options page should work. So if we right-click, go to Options, you can see the Goal is populated at 100 there. We should also be able to reset the Total, so right now our Total is 38. So let's go ahead and click this Reset Total, and now you can see that the Total is 0. So we have most of that functionality working; at this point the only thing we really need to add is the ability to show this goal here, so that shows up in this UI. So let's go ahead and do that real quick. What we want to do for this is we're just going to go back into our popup.html and what we want to do is we want to populate this here. So we're going to need to put in a value and let's just call this id goal and then we want to go into our popup.js, and here, the way that we're going to do this is we're going to get back both the total and the goal at the same time here when we first load up this page. So, instead of just passing in a string, we can pass in an array of strings, and we do that in JavaScript notation, like this with the brackets, so we're going to ask for goal and total. So we should get back both of those things and then all we're going to do here is we're just going to say, okay, give us the goal, set the text equal to items.goal, and that should pretty much do it. Let's go ahead and open up our browser window. And we should just be able to go here now and we can see our Goal. So now if we go to Options, let's change this to, say 150 and save it, and then we'll re-open up our extension, and you can see that the goal is set to 150. We can still add protein, that works, and we should see our goal in our Options. 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. Goal Notifications 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." Event Page Often when creating an extension, you'll need some JavaScript code to run when the extension first loads before a user clicks the icon in the toolbar. In that case, a Background Page is needed. As we talked about earlier, there are two types of background pages - persistent ones called Background Pages and Event Pages, which are only activated at certain times. In most cases, you can get away with just using an Event Page and it's preferred because it takes up less resources. We'll be using an Event Page in our extension to register for any changes to the protein total and update the badge that shows the current total, like you can see here, any time it changes. We'll also use the Event Page to register a new context menu item, like you can see here, that will be displayed when a user has selected some text and right-clicks. We'll add an event handler that will respond to that menu item being selected, which will attempt to add the selected text as a protein amount if the text is a number. 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. Up Next 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 Introduction Hi, this is John Sonmez from Pluralsight, and in this module I'll be showing you how to create a Page Action Extension. So far we've created two browser action extensions, and while browser action extensions are useful, we don't always need our extension to be available on every page we visit in Chrome. By creating an extension that uses a page action instead of the browser action, we can create extensions that are more tailored to specific content on web pages or specific web pages that will be displayed and add functionality conditionally. This is a very powerful way to build chrome extensions, because it allows us to create extensions that aren't always taking up space on the toolbar and are able to show up at the right time to do something useful. I'll also be showing you how to use content scripts, which are another powerful tool in the Chrome Extensions toolbox that allows us to actually inject JavaScript in CSS into an active page to change it however we like. By the end of this module, you should be able to create your own page action-based extension, understand how to pass messages, and utilize content scripts. 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. Page Actions 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 Okay, so now let's go ahead and load this extension into Chrome. We do need one last thing before we do this — we need to copy our icon in here. I just went ahead and created this icon, it's just a little Pluralsight icon with a plus here to indicate it's Pluralsight Helper, and so now that we have that, we can go ahead and do this ‘Load unpacked extension' and then we're going to look for our extension, which is Pluralsight Helper, click OK, and we should see Pluralsight Helper is showing up in here. Now, we're not going to see anything at this point, because remember, unlike a browser action that shows up automatically inside here, a page action is going to show up right here at the end of this address bar, but it's only going to show up when we actually show it. So we actually have to implement some JavaScript that's going to tell Chrome to show this; otherwise, we're not going to actually even see anything from our extension at this point. Showing Page Action Now to go ahead and display our page action, we're going to start off by just creating an event page, just like we did with the last extension, and this event page is just going to contain the JavaScript to just show the page action. Now it's going to show it on every page by default, because it's just going to run for every page, but when we actually create our content script, we're going to make the content script be responsible for telling the event page to go ahead and show it and then it will only show it for the Pluralsight website, but we're just going to do this to get started. So, we're going to go ahead and create a new document, we're going to call this eventPage.js, and then we're going to go ahead and go into our manifest file and we want to add this event page. We're going to do this just like we did for the previous extension we created, so we're just going to say background, and then inside here we go ahead and put in our scripts. So we're going to add scripts and then we have an array of scripts and we're just going to have the one eventPage.js, and then we want to tell this to be persistent false so that we don't have a background page; instead, we're going to have an eventPage, so persistent false. Okay, so now let's go ahead and modify our eventPage. We're going to go ahead and drag it into the Editor and what we want to do in this eventPage is we want to basically just show our pageAction. So the way that we do that is we just do chrome.pageAction.show and then we're going to specify what the tabId is. Now we don't know what the tabId is so we have to figure out what tab to show this on. So, instead of just doing chrome.pageAction.show, let's go ahead and comment this out, what we're going to do is we're going to do chrome.tabs.query and this is going to let us query the tabs based on some conditions, so we're going to say active equals true. We want basically the active tab and we want it to be in the current window, so we're going to say, currentWindow: true, as well. And then we can pass back a function that's going to be executed with the tabs passed in as a parameter, it'll be a callback here. So here's our function, so then once we have this, now we can go ahead and paste this in here and we're just going to say chrome.pageAction.show and we can get our tabId by doing tabs This should really only be 1, because there's only going to be one active tab for the current window. Okay, then let's go ahead and close this out, put a semicolon here, and now we should be set to go. Okay, now we're going to need to reload this in our browser to actually see this show up, so we're just going to first add some permissions to our manifest.json in order to make sure that we can actually manipulate the tabs, which is what we're basically doing when we're doing that query on the tabs, and we're going to be showing our page_action. So we're just going to do a permissions and we're just going to add one permission here, which is tabs. Now we'll go ahead and save this. Let's open up our browser and I'm going to go ahead and enable my Pluralsight Helper extension. So when I enable this, it should reload, I'll just reload this one time to be sure, and you can see that our page_action is showing up, and it doesn't actually do anything at this point and it's only going to show up on this page. It's basically showing up when that eventPage runs; remember, we only have one eventPage, so it's going to run wherever this first gets loaded. Since it's on this Chrome extensions page it's going to load up here. If we go somewhere else or open a new window, it doesn't show up, but we are going to make this work for multiple pages, or actually, the correct pages, once we add our content script - we'll need that in order to be able to make this more conditional. If you wanted, however, you could make it so that, for example, your eventPage hooked into some event, like whenever a page loaded, and then maybe it checked on that page for some certain text, and based on some text, it triggered showing this page_action. Content Scripts We've already briefly mentioned Content Scripts, but let's dive a little deeper now that we have more of an understanding of how extensions work in Chrome. Up till this point, everything we've done as an extension has worked at a high level. Nothing we created so far actually manipulated an actual web page and its data. In fact, using browser actions, page actions, and even background pages and event pages, we can't actually do much to a page itself. In order to actually manipulate a loaded page with our extension, we need to use a content script. Content scripts are registered in the manifest file and include a Matches property to determine what pages the content scripts will run on. Most often this is a URL with a wild card. For example, with our extension, we'll be running our content scripts on certain Pluralsight URLs. The content script itself can be JavaScript or CSS. You can really think of the content script as being some additional JavaScript or CSS that's run when a certain page loads. Content scripts basically get tacked onto a loaded page and can operate on those pages like any other script or CSS, but content scripts can't actually utilize most of the functionality of the chrome APIs available to other parts of an extension; they have to pass messages to get their work done, which we'll talk about next. Messages 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 Okay, so let's go ahead and add a content script to our extension. So what we're going to do is we're basically just going to add here a section for any content scripts. So we're just going to call this content_scripts and then inside here we're going to add an array of the content_scripts that are going to be added. Each one is going to be a particular object, so let's go ahead and add an object here, and then we're going to want to have a matches property, so we're going to specify what this should match, and I'm just going to copy this. We're going to use a couple of the Pluralsight URLs that have some course lists here. We don't want this to show up on every single page in Pluralsight and we don't want this to show up on non-Pluralsight pages, so we're going to say basically anything under this training/Courses/* - this * is a wild card, which means that it'll match anything that starts with this, and then anything under this URL as well, and you can match your wild cards on a couple of different things. You can check out the wild card matching if you look at the content_scripts in the chrome documentation for extensions. It has a few other ways that you can use to match them, but most often you'll probably use matching similar to how we're doing it here. So, next we're going to specify what our JavaScript is, so we're going to say js and then here we have an array of our JavaScript. So, what we're going to include here is a JavaScript file that we're going to call Pluralsight_cs (for content script) .js and then we're actually going to add our jQuery as well, because we want to have that accessible from our content script, so we want to make sure that we include this. Whenever you use content_scripts, if you have some library that you're going to use, you might want to include it here because you can't always rely on that being on our page. So instead of us relying on this version of jQuery existing on the page, we're going to make sure that we include it here, and we'll go ahead and add a comma after this, so now our manifest file should be complete. Creating The Content Script Okay, so now let's go ahead and actually add our content script. So we're just going to go ahead and go to our directory here. And we're going to create a file, so let's do a ‘New Text Document' and we're going to call this Pluralsight_cs.js. Now we're going to go ahead and open this up, and by the way with our content script, if it's going to run on Pluralsight, we do have to add a permission for this as well in order to be able to give our extension permission to operate on any of those sites that we want to use this from. So let's go ahead and do that real quick before we actually implement our content script. So all we're going to do is we're going to give it a general permission for Pluralsight, so we're just going to add here http://Pluralsight.com/*, so that'll make sure that it has permission for anything it needs to do on Pluralsight. Now inside here, what we actually want to do is we're going to want to basically send a message to our eventPage that's going to tell it to go ahead and display the page_action. All this at this point is just to get the page action being displayed correctly. Now remember, our content script is going to run on these particular pages, so it's going to immediately run this JavaScript, and what we're going to do by doing this is make sure that our page_action only shows up when we're at one of these URLs or a URL that matches one of these. So, we're going to go into our Pluralsight_cs.js and here what we want to do is basically just send a message that says to show. Okay, so what we're going to do inside here is we're just going to do chrome.runtime.sendMessage and then here we can send a message and it can basically be any object. So we're just going to create an object that we're going to have a property called action on and we're going to set the action equal to show. You could do whatever kind of format you wanted in order to make this work. I'm just going to use this so that we'll have some convention of we're going to check what the action is, the action is going to say what that particular action should be, so we're basically just sending this show message. Now remember, this script is going to run on any page that matches this matches here. So, as soon as this runs, it's going to be sending this message that's going to say show. Then on our eventPage, we want to go ahead and receive this message and check for that show action. If it's a show, then we're going to go head and actually show it — we don't want to show this always. So instead of just executing this code, we're going to change this now and we're going to say, chrome.runtime.onMessage, addListener, so this is going to add a listener for us, and this is going to take a function, this will be our callback, which will give us the request, it'll give us the sender, and we can send a response. Now we won't actually need to send a response in our case, so then we're going to go ahead and actually put this all inside here and we want to check to see if the request.action is equal to show before we do anything, and then let's go ahead and end this correctly. Okay, so now let's talk real quick about what's going to happen here. So, we're going to load up a page; when we load up that page, if it matches here, it's going to run these two scripts — this Pluralsight one and this jQuery one. This Pluralsight one, if it runs, it will send a message that has an action set to show and then this eventPage has already registered to receive any messages. So any messages that come through it's going to receive, it's going to check to see if it gets show, and if it does then it's going to figure out what the currentWindow, current activeTab is, and it's going to show the pageAction for that. 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. Custom CSS 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 Okay, so the next thing that we're going to do is we're going to go ahead and implement our functionality; we're going to make it so that when a user clicks on that page action, that show course count, it's going to actually show the count of the number of courses on that page for an author next to the author's name, so it's going to add them up and show that. So in order to do that, what we're going to do is we're going to hook up in our popup.html this courseCounts button. We're going to make it actually send a message to the correct tab to that content script, and then that content script that's running on that page is going to go ahead and execute some JavaScript that will go ahead and modify that page and show those courseCounts. So, let's go ahead and create this popup.js; we're just going to be using jQuery like we did before. So we're just going to do our function here and then we need to go ahead and setup our handler, so we're going to do (‘#courseCounts').click and that should match this courseCounts here - let's just double check. Okay, and then we want to give the function here that it's going to call, and for this function, what we're going to want to do is the same thing that we had done before. So I'm just going to actually copy this in order to query all of our tabs. So, we're just going to do chrome.tabs.query, look for the active and current one. Now we need to do this because we have to send a message to a specific tab, we want to send it to whatever the current tab is, because remember, content_scripts could be running on multiple tabs, we could have multiple content_scripts running, so we have to know what tab we're sending this to. We're going to send it to the active one. So now we're going to actually call chrome.tabs.sendMessage and this is how we send a message to a tab and we want to send it to tabs, the 0 with index — that'll give us the id, and then we're going to do action: "courseCounts", and I do want to point out here that you can pass whatever object you want. I just happened to be creating an object that has a property action that has the value of what the action is, but I'm just using that for convention; it doesn't matter what you pass here, whatever message you want to pass you can pass, and however you want to do your messaging - it's basically open to however you want to use this. So let's go ahead and save this. And now what's going to happen is when we show our user interface for our popup.html for that pageAction, it's going to go ahead and execute this JavaScript for a popup.js, which will basically hook up to that click. So when someone clicks that button in the UI, it's going to go ahead and figure out what the active tab is and then send this courseCounts a message. 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 Okay, so now we should be able to go over here and reload our extension. So we're just going to go into Extensions and Pluralsight Helper, and now if we go to Pluralsight, and we go to, let's say the Top 100 Leaderboard, we can see that our CSS is being applied, we've got our pageAction, but if I click this ‘Add course counts', now you can see that instantly I have basically gotten all of the counts for each author so we can see how many courses that they have on the Top 100. And you can see here that Scott Allen is still dominating the Top 100 with 14 courses up there, so this is pretty neat; we can actually apply this to the new releases page as well. And this has actually all the courses that have been released on Pluralsight from day one, so it's pretty interesting if we do this one. We can get the courseCounts for every single author, so you can see how many courses each author has done, what their total number of courses is. And just to recap real quick what's happening when we're doing this is, when we click this button here this ‘Add course counts', it's basically figuring out what the active tab is, it's sending a message to the content script here, so this content script receives the message, and then it executes the JavaScript that's going to manipulate this page. Our actual UI here, the JavaScript behind this, can't manipulate the page directly; it's not even really attached directly to a page, it's attached to our extension to our actual pageAction, so we have to use this indirection, we have to use the message passing in order to be able to get access to the actual page. Adding DataTable Plugin Now the last thing we're going to implement for our plug-in is to make it so that this table here is sortable when we click this ‘Make sortable' button. Now rather than reinventing the wheel, we're actually going to use a jQuery plug-in called DataTables. So we can go to jQuery datatable and here you can see there's this DataTables plug-in for jQuery. I'm just going to use this as an example of how you could use a plug-in or use something else in your content scripts. So what we're going to do is we're just going to download this, and then we're going to go ahead and get the JavaScript file out of here. So inside here, you'll find underneath the media there's a js and then here there's this jquery.dataTable.js. So we're just going to go ahead and add that to our extension, we'll just drop it in here, and then what we're going to do is modify our manifest file to include this. So we can just go to our Editor and then in our manifest here we can add for our js for our content_scripts, this data table, so we're just going to add this one and let's go ahead and copy this so we get the right name. Okay, so now what's going to happen is that any of the pages that load our content_scripts are also going to load this jQuery.dataTables.js, which is going to give us the ability to very easily convert a regular table into a sortable table. 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. Testing Sorting 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. Up Next 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 Introduction 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 Surprisingly, chrome extensions can be debugged just like any other web page in Chrome, but you can't just open up the Chrome Dev Tools on any page to debug your extension, instead, you need to open up the Chrome Dev Tools for the extension UI pages or background pages. I'll show you how to do both next. Using the Chrome Dev Tools, you can see the HTML markup, as well as the CSS styles applied, and even set breakpoints in JavaScript so you can figure out exactly what's going on in your extension, but sometimes it is easiest to just throw the old alert code in your extension to show a message box, or better yet, to log to the Chrome console to debug an extension. Let's take a look at some of the ways of debugging extensions next. Debugging Page UI Alright, so let's go ahead and see how we can actually debug some of our extensions. So, if you already are familiar with the Chrome Developer Tools, you may have used them on a web page, so for example, I could right-click on something here and say ‘Inspect element' and this would bring them up and I can also just bring up the Chrome Developer Tools from either the menu if I go under Tools and then go to Developer tools or the JavaScript console, but you may have used these tools to debug web pages, to change the html or the CSS or just to go through the JavaScript and figure out what's going on and you may have found that you're not actually seeing the extension JavaScript or the extension HTML inside here. So, you can actually use the Chrome Developer Tools, but you just need a different instance. So, for example, let's take a look at our Protein Tracker extension. If I were to right-click in here, I can do an ‘Inspect element' and this will work. I can also just right-click on the extension itself in the toolbar and say ‘Inspect popup' and that will go ahead and bring up the popup, as well as another Chrome Developer Tool console. So this one is actually operating against this particular page; so if we were to go to Elements here, you can see that it is working for our popup, our user interface here, and then from here we could look at our sources and we can find all of the actual source here; this popup.js, for example, and we can do anything we want with this JavaScript. So, just being able to see what's loaded up is step one, that's one really useful thing to be able to do to debug an extension. In many cases you can figure out what's going wrong with your extension by looking here and seeing if there's something missing, is this JavaScript correct, can you see what's happening with this HTML? For example, you could go in here and you could change the HTML or the CSS styling if you wanted to. So let's go ahead and change the style for this; for example, let's say that the element.style for this should be font-size and we'll make this small, so you can see that this actually changes to small. So that's how we get at our actual extension when we have this visible page UI. Breaking In JavaScript Now let's look at an example of how you might actually utilize this to figure out something that might be going on here; so for example, what we can do here with our Protein Tracker is we can go to our Sources and this popup.js, and from here, we can actually make some changes or set breakpoints. So, let's go ahead and just set a breakpoint here and let's say that we want to figure out what's going on. Let's set a breakpoint, let's say right there. So now what we can do is we can basically type in something here and click this ‘Add Protein' and you'll see that we're hitting this breakpoint, so we're actually debugging this in this JavaScript debugger, and we can do all kinds of things like we can look at our scope variables. So here we have our local variable, so we can see what the amount - it's set to 123, we can see our items, we can basically go through here and even step through this if we wanted to. And we're not going to go through all of the features of the Chrome Developer Tools here, but you basically have the entire capability of the Chrome Developer Tools at your disposal to be able to debug these extensions. So if you know how to use the Chrome Developer Tools, and I'll show you in a minute a resource that you can use to find out more about it, but if you do use the Chrome Developer Tools, you'll find that debugging an extension really isn't much different than debugging any web page. Using The Console So I wanted to show you one more thing real quick that I find really useful for debugging an extension and this will apply to some of the other pages that we'll look at in our extension debugging in a little bit here, but it's one of the things that a lot of developers forget that they can do when debugging an extension. And I find this really useful. So let's go ahead and go through here and we'll just let this continue and get rid of this breakpoint. But now I'm going to click on this console and we can actually bring it up in here as well just by clicking this so that we can have a split view. But what we can do with this console is we can basically enter any JavaScript in here, so we could do things like perform selectors, jQuery selectors, we can actually manipulate the DOM, we can basically run JavaScript, we have a console in here, and one really useful thing that you can do is you can use the chrome object. Remember that the chrome API is basically chrome.whatever and so you can actually practice or try utilizing or experiment with chrome API calls from here. So, for example, remember we have like this browserAction, so we could actually do browserAction, and we could actually do something like get the popup or get the title or even set the popup or title, setBadgeText, so we could try doing that; we can basically do anything we could do with that API, which is really neat because you can sort of experiment with some of the API calls in order to build out your extensions. So maybe you have part of the functionality of your extension and you want to try to do something in it and you don't want to have to make changes to your actual extension and then reload it to test it out, you can test out that logic sort of right inside here and see what's going on. Another useful thing that I tend to do is to go into my source code and then let's say that I'm having a problem that isn't working; for example, trying to do this sync.get. Well I could just copy this code that's not working, I can put it into the console, so let's go ahead and do that real quick, and then, for example, in this callback here, I could change this, do like a console debug in here to write it out or figure out what's going on a lot easier. So, I utilize this quite often to be able to troubleshoot pieces of my code. Debugging Background Pages Okay, so that's the basics of doing debugging for our UI pages, but you may need to get at some background pages. So, for example, we have an eventPage for our Protein Tracker and then for our Pluralsight extension, we have some pages as well. So let's take a look and see how we can get to those. So, for example, let's look at our Pluralsight extension. If I go to this Top 100 Leaderboard here, if I right-click on our extension, I can do an ‘Inspect popup' and then I'm going to be able to access this extension here, so this one makes sense, and this is pretty easy — you probably won't have much trouble figuring that out, but let's suppose you want to get to those event pages behind this. Well the way to do that is you can just go to your Settings and then go to Extensions, and then from here, if you look at each one of these extensions, let's take our Pluralsight Helper, for example; it has this "Inspect views: generated background page.html." So what we can do here is we can click on this, and then this should bring up our developer tools for that eventPage, and what you'll notice is that actually what happens is Chrome generates a background_page.html that just has a body that has your script in here that has your source for your eventPage. You can, of course, create an HTML page with an eventPage if you want to, but Chrome will just generate this for you. But what we can do now is we can go in here and we can look at this eventPage.js and this is our actual JavaScript, and again, we can set breakpoints in here if we want to; so, for example, let's say we set a breakpoint on that, then we go over here, and then we reload this page. You can see that we're hitting this breakpoint — we got this request, action, which is set to show, so it's about to show our actual extension. So you could do this with anything that you have as a background_page, and of course, you could have multiple background pages, so you could use this for whatever background pages you have and you can open up multiple Chrome Developer Tool windows in order to be able to debug back and forth when you're sending messages back and forth. And I do want to remind you also though, don't forget that sometimes it's easiest to just go ahead and do something as simple as do alert(‘hi'). I mean this isn't the best practice for debugging some complex JavaScript, but occasionally it makes sense to just do something really easy, really visible; just put in your code and run this, and this is going to prove that you got to this point, that you don't have to open up the console. You can also do things like debug right in here that will set a debugger, set a breakpoint automatically or logging to the Chrome console, which you can do just by doing console.log, and then specifying your message. 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. Deployment 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 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. Manual Install 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. Inline Installation Now this is one of my favorite ways to deploy your extension. This approach is a combination approach we talked about earlier; the official name is the inline installation. In this case, we'll host our extension with the Chrome Web Store, but we'll add some code to our page to allow a user to install it directly from our site. To do this, it's not very hard at all. First, you need to, of course, have your extension deployed in the Chrome Web Store, then you just add the link in your head tag of your page that links to the Chrome Web Store with your extensions unique ID. Finally, you can just call chrome.webstore.install to allow the user to install the extension in some JavaScript code. There are a couple of other restrictions that you should know about though. First, you need to make sure your site is verified with the Google Site Master Tools, and second, the user has to initiate the action for your call to chrome.webstore.install. So in other words, you can't just run this script when someone comes to your page; they have to click a button or do something else to initiate it. You can find the complete documentation with all the details at this link, but it's pretty simple and easy to do. Analytics Support Now one last thing I wanted to mention real quick is using Google Analytics. You can actually use Google Analytics in your actual extension, so you can track things like page views, as well as events that happen in your extension so you can see how users are using your extension. We're not going to go over the details of that in this course, but if you do want to find out more you can go to developer.chrome.com/extensions/tut_analytics.html and here is a quick tutorial that shows you how to do this. It's really useful to be able to do this, it's pretty simple to do as well, it's just some JavaScript code that you're basically going to insert into your extension. The End 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. Course author John Sonmez John Sonmez is the founder of Simple Programmer (http://simpleprogrammer.com), where he tirelessly pursues his vision of transforming complex issues into simple solutions Course info LevelIntermediate Rating (231) My rating Duration2h 40m Released11 Sep 2013 Share course