Google Chrome is the best web browser around right now, and the main feature of that brings it at top is its excellent extensions. The extensions allow us to add functionality to Chrome without going deeply into native code. You can easily create new extensions for Chrome with those core technologies that you’re already familiar with from web development: HTML, CSS, and JavaScript. In this articles, we’ll learn how to create a simple Google Chrome extension.

Step 1 – Manifest.json

The very first thing that we’ll need to create is a manifest file named manifest.json. The manifest is nothing more than a JSON-formatted table of contents, containing properties like your extension’s name and description, its version number, and so on. At a high level, we’ll use it to declare to Chrome what the extension is going to do, and what permissions it requires in order to do those things.

In order to display images, we’ll want to tell Chrome that we’d like to create a browser action, and that we’d like free-reign to access images from a particular source on the net. A manifest file containing those instructions looks like this:


{
"manifest_version": 2,

“name”: “Web Revisions – Image Gallery”,
“description”: “This extension demonstrates a browser action with flowers.”,
“version”: “1.0”,

“permissions”: [
“https://secure.flickr.com/”
],
“browser_action”: {
“default_icon”: “icon.png”,
“default_popup”: “popup.html”
},
“icons”: { “16”: “micon.png”, “128”: “iconn.png” }
}

 

What does it mean?

The attribute names are very descriptive. The first line, which declares that we’re using version 2 of the manifest file format, is mandatory. The next block defines the extension’s name, description, and version. These will be used both inside of Chrome to show a user which extensions you have installed, and also on the Chrome Web Store to display your extension to potentially new users. The name should be short and snappy, and the description no longer than a sentence.

The next block first requests permission to work with data on https://secure.flickr.com/, and declares that this extension implements a browser action, assigning it a default icon and popup in the process.

The icon.png will be displayed next to the Omnibox, waiting for user interaction.

popup.html will be rendered inside the popup window that’s created in response to a user’s click on the browser action. It’s a standard HTML file, just like you’re used to from web development, giving you more or less free reign over what the popup displays.

 

Download Running Example Files

You should now have four files in your working directory: icon.png, manifest.json, popup.html, popup.js. The next step is to load those files into Chrome.

Step 2. Load the extension

Extensions that we download from the Chrome Web Store are packaged up as .crx files, which are great for distribution, but not so great for development. So Chrome gives you a quick way of loading up your working directory for testing. Let’s do that now.

  • Visit chrome://extensions in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox   and select Extensions under the Tools menu to get to the same place).
  • Ensure that the Developer Mode checkbox in the top right-hand corner is checked.
  • Click Load unpacked extension… to pop up a file-selection dialog.
  • Navigate to the directory in which your extension files live, and select it.

 

If the extension is valid, it’ll be loaded up and active right away! If it’s invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

email
Web Design Quote

Categories
Archives