chrome-extension anatomy and how its parts communicate

https://dev-to-uploads.s3.amazonaws.com/i/zn9nnnbp224j687t2s2w.png

chrome extension contains 6 important files:

  1. manifest.json: organises the extension structure ( somehow similar to package.json).
  2. background script: This resource is shared between all browser windows and every element inside them (so changing a value in the background will change it everywhere on the browser instantly).
  3. popup script: contains the markup that the extension displays when you click on its icon, it is containable in the single tab, does not have access to the extension background or page content but it can communicate with them through messages as:
    a. chrome.runtime API to communicate with the background.
    b. chrome.tabs API to communicate with its tab.
  4. content scripts: it is containable in the page window so it has access to the page DOM, it does not have an actual effect on the extension itself unless it starts communicating with the background and popup scripts through messaging events.
  5. options script: this is a special file that allows you to give the user some options in order to personalise their extension as they want, any piece of an option can be saved to the chrome.storage.local and can be synchronised between multiple browsers where the user logged in to chrome using chrome.storage.sync.
  6. icons files: should be in sizes like 1616 and 3232px, the paths to those files should be specified in the manifest.

Communication between different scripts:

1. From everywhere to background scripts and vice versa:

2. From popup to content and vice versa:

first: background as middleware

  1. you send a message from popup to the background.
  2. the background will handle the request and send its response to everywhere.
  3. both popup and content scripts are containable in everywhere (check the chart).
  4. you can listen to that response either in popup or content or both, so you received the message.
  5. done !!

second: create a connection between popup and content through the tab

  1. you open a port between popup and content through the tab background.
  2. you send a message through that port to the tab background.
  3. tab background will redirect it to the content script which will handle the request and send it through the same port to the popup.
  4. you can listen to that response either in the popup, so you received the message.
  5. you can close the port, or leave it open to send other messages.
  6. done !!

--

--

--

Full Stack Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Export Google Play Music Playlists

Some React Topics

Milestone-2 | Day-2 | React

State of the (React) Union

Responsive

Anna Coding Front-end Reading in Depth Week — 19

The Essential Guide on React Native App Development - 2021

Adding Authentication To Your App The Easy Way

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmad Ali

Ahmad Ali

Full Stack Developer

More from Medium

How .every() helped me in an interview

Would my quality of life improve if I left architecture?

Peer-to-peer: A conversation with Lucas, our full-stack developer and garden hero

Frontend learning platform comparison