There are two types of Chrome extensions.
1) Browser Extension - Available at all times, with its icon displayed in the toolbar.
2) Page Extension - Applies to one or more pages. The icon is displayed in the address bar. Performs operations on the content of the page.
General Development Steps
1. Create an empty directory
2. Add the following files to the empty directory.
Manifest.json - Information about the extensions, permissions requested by the extension (for example, to access storage), and names of all the content files of the extension (html, javascript files).
3. Html files
May not include embedded javascript.
popup.html - file that is displayed when the extension icon is clicked, page title becomes the tooltip text for the extension icon
options.html (optional) - file for setting options for the extension
4. Icon
19x19 icon for the toolbar icon for the extension
5. JavaScript files
Normal javascript file referenced from the html pages
Event javascript page that is executed when an extension is loaded. Provides an opportunity to hook up handlers to various events (Event js is just background script with persistent set to false in manifest).
Background javascript file that keeps running in the background for the extension (persistent set to true).
Can have one or the other.
Simply copy thirdparty libraries to the folder and reference in HTML file. Make reference to these files in the head tag of html using the script tag.
6. Css
Style files referenced from HTML pages.
For example, use popup.css in HTML page using the link tag.
7. Images
Images referenced in HTML pages.
8. Content scripts
Javascript that runs on the page being browsed. Tacked on the page being viewed.
Cannot use chrome extensions API directly.
Must use messaging to communicate with chrome extension code.
9. Testing extension
In Google settings, go to Extensions tab.
Enable developer mode.
Load unpacked extension from the directory
Can do "Inspect Element" on the extension to debug.
