Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fundamentals of Google Chrome Extension Development

Mert Metin
December 17, 2023

Fundamentals of Google Chrome Extension Development

Fundamentals of Google Chrome Extension Development

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

Mert Metin

December 17, 2023

More Decks by Mert Metin

Other Decks in Technology


  1. 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
  2. What is Google Chrome Extensions? Extensions are small and single

    purpose programs that allows users to have their browsing experience customized on Chrome
  3. Some Purposes Managing “events” on browser. Enriching content of web

    sites. Improving user productivity and experiences
  4. 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
  5. 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.
  6. 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
  7. “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
  8. 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.
  9. “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
  10. 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
  11. Publishing on Google Web Store Uploading file type is .zip

    which contains extension files, .crx and .pem file