GETTING-STARTED.md

Chrome Extensions - Getting Started

1. Chrome Extensions - Getting Started
   1. Useful Chrome Extension Links
   2. Chrome Extension Files
      1. Required manifest.json entries
      2. Replace the default Chrome Tab with another page
      3. Permissions
   3. Load Chrome Extension from local files
   4. Pack a Chrome Extension for distribution

Useful Chrome Extension Links

• Overview
• Getting Started
• Developer's Guide
• Manifest File
• Event Pages
• Javascript API's
• Permissions
• Sample Extensions

Chrome Extension Files

Every extension has the following files:

• A manifest file (manifest.json)
• One or more HTML files (unless the extension is a theme)
• Optional: One or more JavaScript files
• Optional: Any other files your extension needs, for example, image files

Required manifest.json entries

  // manifest.json
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString"

Replace the default Chrome Tab with another page

// manifest.json
"chrome_url_overrides": {
  "newtab": "index.html"
}

// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({
    url: `index.html`
  });
});

Permissions

// manifest.json
"permissions": [
  "background", // for chrome extension api permissions
  "storage",
  "tabs",
  "http://*.google.com/", // for CORS ajax call permissions
  "https://*.google.com/"
]

Load Chrome Extension from local files

• 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 "More tools" --> "Extensions" under the menu to get to the same place).
• Check the "Developer mode" checkbox in the top right-hand corner.
• Click "Load unpacked extension", to pop up a file-selection dialog.
• Navigate to the directory in which your extension files live, and select it.
• Alternatively, you can drag and drop the directory where your extension files live onto chrome://extensions in your browser to load it.

Pack a Chrome Extension for distribution

• Open up the Chrome menu by clicking the icon to the far right of the Omnibox, and select "More tools" --> "Extensions".
• Click "Pack extension", to pop up a file-selection dialog.
• Navigate to the directory in which your extension files live, and select it (src). If you have optimized (minified, uglified, etc...) your files into a new directory, select that (build, dist, etc...).
• Click "Pack Extension"