What Is a Chrome Extension?
A Chrome extension is a plugin for the Chrome browser that extends and enhances the built-in functionality of the browser and Chrome OS operating system. Extensions are the only way to "install" software on a Chromebook. Extensions come in two flavors: background extensions and apps. Extensions run in the background, often require little to no user interaction, and typically exist within the browser window itself. AdBlock is a good example of an extension that requires no user interaction; it runs in the background doing the task it was programmed to do. Apps are similar to traditional desktop applications such as Word or iTunes; they can open their own separate windows and a launcher button is added to the Chrome app launcher when they're installed. Complex apps usually have features of both background extensions and apps. Chrome apps are really just a special type of extension from a programming perspective.
Chrome apps are nothing more than web applications that run locally on the user's computer, unlike a traditional web page where the browser has to first download the web application's files before it can run scripts or display the web page. Chrome apps, just like web sites, are developed with three main technologies: HTML, CSS, and JavaScript. If you're not familiar with these technologies, check out the following resources:
- CodeCademy - An interactive tutorial for many different web technologies.
- W3Schools - A reference resource suitable for beginners.
- Mozilla Developer Network - A reference resource suitable for intermediate or advanced learners who need more detailed Application Programming Interface (API) reference.
Write Your First Extension - Hello World!
Hello World is traditionally the first program a developer writes when starting on a new platform, so we'll do the same in this exercise. Because students are likely to be using Chromebooks, this application will be programmed on a Chromebook.
Step 1. Download a Chrome app suitable for programming; any editor with syntax highlighting is acceptable. I use Text on Chrome OS, but Caret is another capable option. If you're following along on a Mac or PC then I recommend Text Wrangler or Notepad++, respectively. Sublime Text is another excellent editor available for both Mac and PC.
Step 2. Create a folder in the Downloads folder on your Chromebook to save your files for this exercise. You can also create the folder on Google drive, but you'll have to copy it to Downloads before loading the extension because developer extensions cannot be loaded directly from Google Drive.
Step 3. Chrome apps, unlike their Internet-based siblings, require a special file called a manifest. The manifest provides information such as name, description, version, any permissions that your app might need, and many other pieces of information that Chrome needs to properly execute the app whilst keeping the end-user secure. This file must be named manifest.json, and it must be in the root directory of the application.
Open up your text editor, and type the JSON (JavaScript Object Notation) formatted code below. Pay special attention to the special characters because they're crucial to maintain correct JSON syntax. JSON is especially useful in web applications because it's easily interpreted by both JavaScript within the browser as well as various server-side languages. Save the file as manifest.json in the folder you created in step 2.
Step 4: Let's write the HTML for the application. Open a new file in your text editor and save it as main_window.html. Enter the HTML code below. Notice the embedded CSS inside the style element. It's considered best practice to put your CSS in an external file so it can be used my multiple pages, but I've simply embedded it in the HTML file to keep things simple.
Step 1. Download a Chrome app suitable for programming; any editor with syntax highlighting is acceptable. I use Text on Chrome OS, but Caret is another capable option. If you're following along on a Mac or PC then I recommend Text Wrangler or Notepad++, respectively. Sublime Text is another excellent editor available for both Mac and PC.
Step 2. Create a folder in the Downloads folder on your Chromebook to save your files for this exercise. You can also create the folder on Google drive, but you'll have to copy it to Downloads before loading the extension because developer extensions cannot be loaded directly from Google Drive.
Step 3. Chrome apps, unlike their Internet-based siblings, require a special file called a manifest. The manifest provides information such as name, description, version, any permissions that your app might need, and many other pieces of information that Chrome needs to properly execute the app whilst keeping the end-user secure. This file must be named manifest.json, and it must be in the root directory of the application.
Open up your text editor, and type the JSON (JavaScript Object Notation) formatted code below. Pay special attention to the special characters because they're crucial to maintain correct JSON syntax. JSON is especially useful in web applications because it's easily interpreted by both JavaScript within the browser as well as various server-side languages. Save the file as manifest.json in the folder you created in step 2.
 |
| manifest.json |
Step 4: Let's write the HTML for the application. Open a new file in your text editor and save it as main_window.html. Enter the HTML code below. Notice the embedded CSS inside the style element. It's considered best practice to put your CSS in an external file so it can be used my multiple pages, but I've simply embedded it in the HTML file to keep things simple.
 |
| main_window.html |
Step 5: Look back at line 8 of manifest.json and notice the scripts array; items in that array will be executed by Chrome when the app launches. We'll use background.js to open our window containing the contents of main_window.html. Open a new file in in your text editor and save it as background.js. Enter the Javascript code below. Make sure you pay special attention to the special characters. JavaScript is case-sensitive, so make sure you're using capital letters when necessary.
 |
| background.js |
That's it! To install your extension into Chrome, click the right-most on Chrome's toolbar, click settings, and click extensions on the left side of the settings page. You might need to tick the "Developer Mode" option to enable the developer features. Click "Load unpacked extension", and select the folder you created earlier. Your app will now be in the app launcher, or you can simply press "Launch" from the extensions page. If Chrome throws an error or the app fails to launch then check your code for any errors.
 |
| Hello World! |
In the next post, we'll dive a little deeper by using JavaScript to add some additional functionality to our Hello World app. Make sure you keep your copy of the project safe by syncing it to Google Drive.
No comments:
Post a Comment