Extensions are small custom programs/software developed to enhance the surfing/browsing/searching/googling experience. It can influence users to treat chrome as a search engine application, individually they can customize chrome functionality based on their needs and preferences. The technologies used to develop extensions are HTML, Javascript & CSS.
An extension should have a specific purpose and be easy to understand. A single extension can include many components and a set of functions, as long as they all contribute to the main purpose.
The interface at least reflects the main purpose. Starting from simple icons, for example the Google Mail Checker extension as shown below, to setting aside the entire page.
The extension files are zipped into a single .crx package that the user downloads and installs. This means that the extension does not rely on content from the web, unlike a regular web app.
Extensions are distributed through the Chrome Developer Dashboard and published to the Chrome Web Store. For more information, see the store's developer documentation.
Hello Extensions
Take a small step towards extensions with this Hello Extensions example. Start by creating a new directory to store the extension files, or download them from the sample page.
Next, add a file named manifest.json and include the following code:
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2
}Every extension needs a manifest, although most extensions won't do much with just a manifest. In this example case, the extension has a popup file and an icon declared in the browser_action field:
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}Download hello_extensions.png here then create a file titled hello.html:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>The extension now displays hello.html when the icon is clicked. The next step is to include a command in the manifest.json that allows creating a keyboard shortcut. This step is fun, but be careful:
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}The final step is to install the extension on your local machine.
- Navigate to chrome://extensions in your browser. You can also access this page by clicking the Chrome menu on the top right side of the Omnibox, hovering over which has a bunch of tools to select Extensions.
- Check the box next to Developer Mode.
- Click Load Unpacked Extension and select the directory where you put your "Hello Extensions" file.
Congratulations! You can now use the popup-based extension by clicking the hello_world.png icon or by pressing Ctrl + Shift + F on your keyboard.