Slide 1

Slide 1 text

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

Slide 23

Slide 23 text

Javascript Usage manifest.json Usage Internalization - chrome.i18n

Slide 24

Slide 24 text

Using and Deploying Extension

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Load unpacked the extension

Slide 27

Slide 27 text

The App on Extensions Page The App on Address Bar

Slide 28

Slide 28 text

Pack extension: Production ready Creating .crx file

Slide 29

Slide 29 text

Pack extension: Production ready

Slide 30

Slide 30 text

Pack extension: Production ready

Slide 31

Slide 31 text

Publishing on Google Web Store

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Demo

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Thank You! QR for reach me