Softnami
Author: Hussain Mir Ali

I am interested in web and mobile technologies.

If you any questions or feedback then message me at devtips@softnami.com.

Announcements
Ads

Call predictor: AI based call prediction

Download

2020

Feb
Jan

2019

Dec
Nov
Jul
May
Mar
Jan

2018

Nov
Sep
Jul
Jun
Apr
Feb
Jan

2017

Dec
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Jan

2016

Dec
Oct
Sep
Aug
Jul

Technical Specs of Chrome extensions

Chrome extensions allow developers to build browser extensions that help address a specific use case. So the tool can provide certain functionality independent of the current website origin in the browser. It helps users by enhancing or altering the experience of existing websites without the need to run scripts in the browser console themselves. 

In this blog post the technical aspects of Chrome extensions are presented to ease conceptual understanding.

Technical Specs

Chrome extensions are in a way compact websites with associated HMTL, CSS and JavaScript files. 

UI Types: 
There are two different kinds of Chrome extension UI 'browser actions'(for all web pages) and 'page actions'(active for certain web pages).   

File Structure:
All Chrome extension can have the following files as per UI and logic requirements:
  1. manifest.json (required)
  2. HTML files (optional for UI)
  3. JS files (optional for Logic)
  4. Other files (optional for data or image files for icon)  
Architecture: 
The core logic of the extension lies in the background pages/scrips. The 'background.html' file can contain JS with logic for the extension behavior. Or the background JS can directly be used. There are two types of background pages 'persistent background pages'(run all the time) and 'event pages'(run only when needed).  

HTML UI:
Developers can create HTML files for various UI elements in the extension. The 'browser action' extensions can have 'popup' UI and any type of extension can have 'options page' UI to change extension settings. The 'override page' UI can be used as a  substitute for one of the default pages provided by Chrome like 'History', 'Bookmarks Manager' ..etc. The developers can also use methods 'tabs.create()' and 'windows.open()' to open any html file from current extension. The HTML files can manipulate each other's DOM and can call each others functions.

Content Scripts:
Content script is JS that allows the DOM manipulation and information scanning of the visited webpage in the browser. The content script JS can communicate back and forth between the parent extension via messages. But the content script cannot modify the DOM of the parent extension's HTML files. 


Developers can find more detailed information at https://developer.chrome.com/extensions/overview .