Course info

Rating

(233)

Level

Intermediate

Updated

Sep 11, 2013

Duration

2h 40m

Description

Chrome is an awesome browser from Google that is very fast and lightweight, yet also very powerful. Chrome also has a very good extensibility model that allows developers with just HTML, CSS and JavaScript skills to create powerful extensions. In this course, I’ll show you the basics of creating Chrome extensions as we create 3 different Chrome extensions. We’ll start off the course learning a little bit about the basics of Chrome extensions and how extensions work in Chrome and then we’ll dive right in and start creating our first extension. Once we have the basics down, we’ll build a more powerful extension that has its own user interface and options page and is able to save data using the Chrome APIs and add its own entry to the right click menu for Chrome. Then, we’ll learn to create a page action extension which will only show up on certain web pages. We’ll also learn how to utilize the Chrome messaging API and even how to inject our own JavaScript and CSS into an existing page to enhance its capabilities. We’ll actually have our extension modify the Pluralsight website course listing page to make the course listing table sortable—so, you won’t want to miss this. Finally, we’ll wrap up our tour of Chrome extensions by learning how to debug extensions as well as deploy them. So, if you are interested in Chrome extensions, but have always thought it might be too difficult to create one for yourself, you definitely need to check out this course. Trust me, it is much easier than you probably think and this course will show you how to do it.

Section Introduction Transcripts

IntroductionHi, 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.

Hello ExtensionHi, 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.

A Browser Action ExtensionHi, 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.

A Page Action ExtensionHi, 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.

Debugging And DeploymentHi, 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.