Skip to main content
Hashnodeylog

Command Palette

Search for a command to run...

Architecture of Chrome Extension

Updated
•3 min read
Y
Yoshi

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.

architecture_of_chrome_extensions.png

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 https://developer.chrome.com/docs/extensions/reference/

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.

#javascript#chrome-extension#software-architecture#indie-maker

Comments (3)

Join the discussion
R
Roshaan4y ago

Amazing guide! Even though I have worked with chrome extensions before this was still extremely helpful

2
J
Jorge Romero4y ago

Hi Yoshi thanks for this.

I am about to start working on my first hackathon and I just decided I need to build a chrome extension. So this post is not just timely, it will be super useful for me.

As I have 0 idea on how to even begin XD

btw, it was Miki Szeles who let me know about your post!

12
R
Roshaan4y ago

Chrome extensions are so fun to build and create. I made one for my first hackathon too XD. It was not much but had a blast creating it

2
M
Miki Szeles4y ago

Awesome writing Yoshi. 😊

I recently got addicted to writing Chrome extensions.

I have developed a plugin with which test automation teams can save hours daily: Save dozens of minutes daily during writing Selenide and Selenium E2E automated tests using the Selenideium Element Inspector Chrome Extension! https://mszeles.com/save-dozens-of-minutes-daily-during-writing-selenide-and-selenium-e2e-automated-tests-using-the-selenideium-element-inspector-chrome-extension

And I am developing a plugin with which you can aid writing your own Hashnode newsletter, by automatically generating the markdown for a bookmarked page.

My motto is: Show me your newsletter and I will tell you who you are.

Keep up the great work, I have followed you to do not miss your posts. 😊

2
Y
Yoshi4y ago

Thank you for your comment and following! I'm interested in your test automation Extension. Because I'm trying Cypress.io to start E2E test automation in our project now. I'm planning to write articles about Cypress.io, please send your feedback!

10
M
Miki Szeles4y ago

Thanks Yoshi. I am happy I could provide something useful for you. I would really appreciate hearing your feedback about my chrome extension. 😊

If it is not too late, I definitely recommend having a look at Selenide. It makes E2E automation fun and easy. I have already written 2 articles about it. I write here the titles, as at the moment links are not displayed in comments: Selecting an End to End Testing Framework - Selenium or Selenide? https://mszeles.com/selecting-an-end-to-end-testing-framework-selenium-or-selenide Selenide, I think this is the beginning of a beautiful friendship https://mszeles.com/selenide-i-think-this-is-the-beginning-of-a-beautiful-friendship

2

More from this blog

ylog

10 posts

Thinking about Product Management, Data analysis and Development