Fundamentals of Google Chrome Extension Development

Slide 1

Slide 1 text

Fundamentals of Google Chrome Extension Development by Mert Metin

Slide 2

Slide 2 text

Senior Software Engineer 7+ years working experience Blogger About Me MERT METİN QR to reach me

Slide 3

Slide 3 text

Agenda Introduction to Google Chrome Extensions? Understanding the Architecture Deploying and Using Extension

Slide 4

Slide 4 text

Introduction to Google Chrome Extensions?

Slide 5

Slide 5 text

Small and single purpose programs that customize browsing experience and extend Chrome’s functionality What are Google Chrome Extensions?

Slide 6

Slide 6 text

Google Web Store https://chromewebstore.google.com/

Slide 7

Slide 7 text

Number of Chrome Extensions Developed by Google 16 https://chromewebstore.google.com/collection/by_chrome_extensions

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

How many Chrome extensions are there? 111,933 https://www.debugbear.com/blog/chrome-extension-statistics

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Some Purposes Enhancing browser functionality Enriching content of web sites. Improving user productivity and experiences

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Understanding the Architecture

Slide 16

Slide 16 text

Technologies Knowledge of basic web technologies are essential. HTML CSS Javascript Chrome API Node JS Typescript

Slide 17

Slide 17 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 Main Architecture Project structure

Slide 18

Slide 18 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 19

Slide 19 text

Enough properties for starting “name” “manifest_version”: 3 “version” "version_name" manifest.json - Properties Optional properties “description” “action” “permissions” “background” “icons” “content-scripts” “default-locale” "host_permissions"

Slide 20

Slide 20 text

manifest.json

Slide 21

Slide 21 text

manifest.json

Slide 22

Slide 22 text

manifest.json - Sample

Slide 23

Slide 23 text

Runs in the content of web pages. “matches” property is required that which pages will be injected. js, css properties will inject javascript and css file respectively. content_scripts

Slide 24

Slide 24 text

“background” Extension's main event handler. Browser triggers Closing the tab Opening the tab Navigating to a new tab.

Slide 25

Slide 25 text

Powerful Features for Browser Interaction Exploring Chrome APIs Tabs API Create, modify and manage browser’s tab system. Storage API Store and retrieve data, sessions. More APIs: https://developer.chrome.com/docs/extensions/reference/api#chrome_extension_apis

Slide 26

Slide 26 text

Example - Tabs API Usage

Slide 27

Slide 27 text

Example - Storage API Usage

Slide 28

Slide 28 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 29

Slide 29 text

messages.json for each locale Internalization - chrome.i18n

Slide 30

Slide 30 text

Javascript Usage manifest.json Usage Internalization - chrome.i18n

Slide 31

Slide 31 text

Using and Deploying Extension

Slide 32

Slide 32 text

Unpack extension: Local development Opening Developer Mode Opening Manage Extensions chrome://extensions/

Slide 33

Slide 33 text

Load unpacked the extension

Slide 34

Slide 34 text

The App on Extensions Page The App on Address Bar

Slide 35

Slide 35 text

Pack extension: Production ready Creating .crx file

Slide 36

Slide 36 text

Pack extension: Production ready

Slide 37

Slide 37 text

Pack extension: Production ready

Slide 38

Slide 38 text

Publishing on Google Web Store

Slide 39

Slide 39 text

Publishing on Google Web Store Uploading file type is .zip which contains extension files, .crx and .pem file

Slide 40

Slide 40 text

Useful Resources Documentation https://developer.chrome.com/docs/extensions check out page

Slide 41

Slide 41 text

Thanks for listening QR to reach me QR to get slide