Fundamentals of Google Chrome Extension Development

Fundamentals of Google Chrome Extension Development

GDG Kocaeli - Devfest Kocaeli 24'
26.10.2024

Kocaeli Bilim Merkezi - Kocaeli

Transcript

1. Fundamentals of Google Chrome Extension Development by Mert Metin
2. Senior Software Engineer 7+ years working experience Blogger About Me MERT METİN QR to reach me
3. Agenda Introduction to Google Chrome Extensions? Understanding the Architecture Deploying and Using Extension
4. Introduction to Google Chrome Extensions?
5. Small and single purpose programs that customize browsing experience and extend Chrome’s functionality What are Google Chrome Extensions?
6. Google Web Store https://chromewebstore.google.com/
7. Number of Chrome Extensions Developed by Google 16 https://chromewebstore.google.com/collection/by_chrome_extensions
9. How many Chrome extensions are there? 111,933 https://www.debugbear.com/blog/chrome-extension-statistics
13. Some Purposes Enhancing browser functionality Enriching content of web sites. Improving user productivity and experiences
15. Understanding the Architecture
16. Technologies Knowledge of basic web technologies are essential. HTML CSS Javascript Chrome API Node JS Typescript
17. 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
18. 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.
19. 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"
20. manifest.json
21. manifest.json
22. manifest.json - Sample
23. 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
24. “background” Extension's main event handler. Browser triggers Closing the tab Opening the tab Navigating to a new tab.
25. 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
26. Example - Tabs API Usage
27. Example - Storage API Usage
28. 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
29. messages.json for each locale Internalization - chrome.i18n
30. Javascript Usage manifest.json Usage Internalization - chrome.i18n
31. Using and Deploying Extension
32. Unpack extension: Local development Opening Developer Mode Opening Manage Extensions chrome://extensions/
33. Load unpacked the extension
34. The App on Extensions Page The App on Address Bar
35. Pack extension: Production ready Creating .crx file
36. Pack extension: Production ready
37. Pack extension: Production ready
38. Publishing on Google Web Store
39. Publishing on Google Web Store Uploading file type is .zip which contains extension files, .crx and .pem file
40. Useful Resources Documentation https://developer.chrome.com/docs/extensions check out page
41. Thanks for listening QR to reach me QR to get slide