Fundamentals of Google Chrome
Extension Development
by Mert Metin
Slide 2
Slide 2 text
Any Users?
Any Developers?
Slide 3
Slide 3 text
Senior Software Engineer
Blogger, Mentor
About Me
mrtmtn
@_mertmetin
mertmtn
Blogcu Mühendis
Slide 4
Slide 4 text
Agenda
What about Google Chrome Extensions?
What is Chrome Extensions?
Chrome Web Store
Some Purposes
Technologies
Extensions Project Structure
Architecture
manifest.json
manifest.json - Properties
content_script
background
Internationalization
Counter App
Deploying and Using Extension
Unpack extension: Local development
Pack extension: Production ready
Publishing on Google Web Store
Demo
Slide 5
Slide 5 text
What about Google
Chrome Extensions?
Slide 6
Slide 6 text
What is Google Chrome Extensions?
Extensions are small and single purpose programs that
allows users to have their browsing experience
customized on Chrome
Slide 7
Slide 7 text
Google Web Store
https://chromewebstore.google.com/
Slide 8
Slide 8 text
Some Purposes
Managing “events” on browser.
Enriching content of web sites.
Improving user productivity and experiences
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Technologies
Knowledge of basic web technologies are essential.
HTML
CSS
Javascript
Web API - Chrome API
Typescript
Slide 12
Slide 12 text
Extensions Project
Structure
Slide 13
Slide 13 text
An extension project has .crx
file format
manifest.json must be added
icons are recommended to
represent the extension
popup files visible part on
browser
Architecture
Project structure
Slide 14
Slide 14 text
manifest.json
A configuration file of the extension which consists
of critical information about its capabilities and the
files it uses
Required file for all extensions.
Json formatted file.
Located on root of extension folder.
Slide 15
Slide 15 text
manifest.json - Sample
Slide 16
Slide 16 text
Enough properties for starting
“name”
Name of the extension which seems on Chrome Web Store and
browser
“manifest_version”: 3
V3 has enhancements security, privacy and performance over
V2
“version”
Defined with below format
"version_name"
Named version
"version_name":"1.0 beta"
manifest.json - Properties
Slide 17
Slide 17 text
“description”
Detailed explanation about the extension.
“action”
Used to define popup page.
“permission”
Used to implement Google API
“background”
Used to specify a js file as the extension service worker.
manifest.json - Properties
Slide 18
Slide 18 text
“icons”
Recommended to represent
the extension.
Icon properties named by size
16,32,48,128 px
manifest.json - Properties
Slide 19
Slide 19 text
content_scripts
Runs in the context of web pages.
“matches” property is required that which specifiying
pages will be injected.
js, css properties will inject javascript and css file
respectively.
Slide 20
Slide 20 text
“background”
Extension's main event handler.
Browser triggers
Closing the tab
Opening the tab
Navigating to a new tab.
Monitoring these events in their background script
Slide 21
Slide 21 text
As a solution to support multiple language accross the
extension.
In manifest.json
"default_locale": "tr"
Directory-file format
/_locales/_localeCode_/messages.json
*tr,en,fr refer to _localeCode_
Internalization - chrome.i18n
Slide 22
Slide 22 text
messages.json for each locale
Internalization - chrome.i18n