To start development of Chrome Extension, I've learned about the architecture of Chrome Extensions. Understanding architecture helped me to understand what I can develop. In this article, I would explain about the architecture and components of Chrome Extension.
Architecture of Chrome Extension.
Button UI in browser toolbar is well known as Chrome Extension. There are extensions without UI like ADBlocker that enable us to remove ADs from web pages.
The diagram below describes the architecture of Chrome Extension as one sheet. It’s divided into 3 sections that are UI, Background and Outside of Chrome.You can also see and download it as Google Slide file.
You will find that Chrome Extension consists of UI,background components and network interface to external API.
The blue boxes indicate the Chrome Extension API provided as a JavaScript library.
By following the URL, you can know the details of the Chrome extension API.
API Reference developer.chrome.com/docs/extensions/refere..
Inside of the Chrome browser
UI
Toolbar button UI
Most popular UI for Chrome extensions is displayed as a small icon in the Chrome browser. When the user clicks the icon, a popup window is shown. The main features of the Extension are often implemented there.
In addition, you can display some notifications as a badge.
Menu / Option UI
The user right clicks the toolbar button, then hovers over the menu list. From menu list, they can visit option page in order to change configuration of Extension.
Web page
The Chrome Extension enables us to modify websites that other organizations have provided. I think it's an important feature because we can not implement it with other platform technology.
Context Menu
The Context menu is shown when the user right clicks on a web page. You can add the original menu to it. One popular implementation of the Context menu is to navigate the search results using highlighted words.
Background
Background Script
Users can't see the Background Script working because it doesn’t have a user interface. However, it is important for providing a functional UI.
Here are some examples:
- It fetches the data at regular intervals using Background Script and displaying notifications as a badge.
- It checks the URLs that the user visits and sees if there are any risks. If it confirms that there are risks, it then displays error messages to prevent access to the dangerous sites.
Browser Data and Functions
Extensions can access the data and functions of Chrome browser. It helps us to make a service improving browser basic functions.
Outside of Chrome Browser
From both UI functions and background processes, Extensions can communicate with external API.
External API
Extensions can work with API such as Twitter API, Google API and original developed API. An example of the original developed API is searching owned service items API.
As we all know, the cost of hosting the original API depends on the number of users. We have to make sure the risk of cost due to user increase.
OS Basic functions
We also use the basic functions of OS like Mac and Windows via API. For example, OS resources are reading and writing to the local filesystem and printing the data.
Next
Next article, I will write about my new idea of chrome extension.