Fundamentals of Google Chrome Extension Development

Fundamentals of Google Chrome Extension Development

GDG Ankara - Devfest Ankara 23'
17.12.2023
Hacettepe University - Beytepe Campus / Ankara

Transcript

1. Fundamentals of Google Chrome Extension Development by Mert Metin
2. Any Users? Any Developers?
3. Senior Software Engineer Blogger, Mentor About Me mrtmtn @_mertmetin mertmtn Blogcu Mühendis
4. 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
5. What about Google Chrome Extensions?
6. What is Google Chrome Extensions? Extensions are small and single purpose programs that allows users to have their browsing experience customized on Chrome
7. Google Web Store https://chromewebstore.google.com/
8. Some Purposes Managing “events” on browser. Enriching content of web sites. Improving user productivity and experiences
11. Technologies Knowledge of basic web technologies are essential. HTML CSS Javascript Web API - Chrome API Typescript
12. Extensions Project Structure
13. 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
14. 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.
15. manifest.json - Sample
16. 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
17. “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
18. “icons” Recommended to represent the extension. Icon properties named by size 16,32,48,128 px manifest.json - Properties
19. 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.
20. “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
21. 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
22. messages.json for each locale Internalization - chrome.i18n
23. Javascript Usage manifest.json Usage Internalization - chrome.i18n
24. Using and Deploying Extension
25. Unpack extension: Local development Opening Developer Mode Opening Manage Extensions chrome://extensions/
26. Load unpacked the extension
27. The App on Extensions Page The App on Address Bar
28. Pack extension: Production ready Creating .crx file
29. Pack extension: Production ready
30. Pack extension: Production ready
31. Publishing on Google Web Store
32. Publishing on Google Web Store Uploading file type is .zip which contains extension files, .crx and .pem file
33. Demo
34. Useful Resources Documentation https://developer.chrome.com/docs/extensions check out page
35. Thank You! QR for reach me