Technical Specs of Chrome extensions
Tuesday, April 17th, 2018
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.
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:
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 .
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:
- manifest.json (required)
- HTML files (optional for UI)
- JS files (optional for Logic)
- Other files (optional for data or image files for icon)
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 .