Using Chrome Extensions to enhance your UI

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.

Types:

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:

1. 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.
2. 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.
   .

Architecture:

A Chrome extension can interact with Chrome browser and content of the web page opened in that browser using the following three components:

1. Background page – an invisible page that holds JavaScript code, it defines the main logic of the application. There are two types of background pages: persistent pages and event pages. Persistent pages always remain loaded in the browser so, unless a persistent page is absolutely required, it is recommended that event pages should always be used.
2. Content script – JavaScript code that runs in the context of the page loaded in the browser. This allows this code to interact with the page. It can even change the page’s DOM. This code can exchange messages with the extension (mainly its background page). Therefore, the content script acts as a bridge between the page loaded in the browser and the extension it’s a part of. However the content script cannot modify the DOM of the parent extension’s background page.
3. 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

An extension is built using web technologies like HTML, CSS, JavaScript, etc. All of the code is then packaged in a single .crx file.

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.