Extensions are a great way to enhance both the functionality and experience of your UI in the Google Chrome web browser. There are many varying types of extensions that are distributed through Chrome Web Store. Once published to the store, an extension can simply be installed by users making additional functionality instantly available. This can extend to including elements like currency converters, mail boxes and even dialogue to gather customer information.
Chrome extensions can be divided into two types based on the scope of the actions that they perform in the browser’s UI. These types of actions are usually categorized as:
- Browser actions – actions that are available on all pages opened in the browser. The icon for such actions appear in the main toolbar of the browser.
- Page actions – actions that are only available on the page that they are configured for. The icon for these actions appear in the location bar when the target page (URL) is opened.
A Chrome extension can interact with Chrome browser and content of the web page opened in that browser using the following three components:
- UI pages – ordinary HTML pages used to display UI required by the extension. These can be used to display pop-up messages or a dialog to collect information.
The HTML pages within an extension often need to communicate amongst themselves. This is because all of an extension’s pages execute in the same process on the same thread; the pages can make direct function calls to each other.
Publishing a Chrome extension
Extensions can be published to the Chrome Web Store by bundling everything in a .zip file and uploading it using the Chrome Developer Dashboard (in this case the .crx file is created automatically).
Extensions can also be installed directly into the browser from the local file system. This can be done by switching to Developer Mode. You can find the checkbox for this in the Extension Manager. You may then proceed to clicking on the ‘Load unpacked extension…’ button in the ‘Select extension directory’ dialog box, then select the root directory of the extension’s code. The Chrome browser will then package the code and install it as an extension.