The document outlines the development of a Chrome extension, detailing its purpose, structure, and essential components such as the manifest file, background scripts, and user interface elements. It highlights the advantages of building a Chrome extension, including integration with the popular Chrome browser and standard web technology use. Additionally, it provides examples, resources, and APIs relevant to Chrome extension development.

1. Develop a Chrome
Extension in 2018
Oleksandr Golovatyi
Senior Front End Developer at AppsFlyer,
Co-Founder & Trainer at ”FullStack Academy Kiev”

2. Develop a Chrome Extension in 2018
•Why build Chrome extension?
•Structure and Architecture
•Test and deploy your Chrome extension
•Chrome extension boilerplate by React
•Examples of Chrome extensions

3. Chrome Extension?
Extensions - small software programs that
customize the browsing experience.

4. Examples of Chrome Extension

5. Examples of Chrome Extension

6. Examples of Chrome Extension

7. Why build a Chrome extension?
Source: http://gs.statcounter.com/browser-market-share

8. Why build a Chrome extension?
•Chrome – most popular browser
•Integration with Chrome
•Could Extend Chrome & any web site
•Standard Web Stack (JS, HTML, CSS)

9. Chrome Extension Structure
.crx zipped file
Chrome Web Store

10. Manifest File
{
"manifest_version": "2.1",
"name": "My Extension Name",
"version": ”0.0.1"
}

11. Manifest File (more …)
{
"description": "Gets information from Google.",
"icons": {
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["bg.js"]
},
"permissions": ["http://*.google.com/", "https://*.google.com/"],
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png",
"default_popup": "popup.html"
}
}

12. Chrome Extension Architecture
•Manifest
•Background Script
•UI Elements
•Content Script
•Options Page

13. Background Script
The background script is the extension's event handler; it
contains listeners for browser events that are important to
the extension.
{
"name": ”My Extension Name",
"background": {
"scripts": ["background.js"],
"persistent": false
}
}

14. UI Elements
•Popup
•Tooltip
•Context Menu
•Omnibox

15. UI Elements: Popup
HTML file that is displayed in a
special window when the user clicks
the toolbar icon.

16. UI Elements: Popup
{
"name": ”My Extension Name",
...
"browser_action": {
"default_popup":"popup.html"
}
...
}

17. UI Elements: Popup

18. UI Elements: Tooltip
Short descriptions or instructions to users when
hovering over the browser icon.

19. UI Elements: Context Menu

20. UI Elements: Context Menu
{
"name": ”My Extension Name",
...
"permissions": ["contextMenus", "storage"],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}

21. UI Elements: Context Menu
var contexts = ["page", "selection", "link"];
for (var i = 0; i < contexts.length; i++) {
var context = contexts[i];
var title = "Test '" + context + "' menu item";
var id = chrome.contextMenus.create({
"title": title, "contexts": [context],
"onclick": genericOnClick
});
}

22. UI Elements: Omnibox
The omnibox API allows you to register a
keyword with Google Chrome's address bar

23. Content scripts
Content scripts read and modify the DOM of web
pages the browser visits.

24. Content scripts

25. Options Page
{
"name": "My Extension Name",
...
"options_page": "options.html",
...
}

26. Options Page
chrome://extensions, locating the desired extension,
clicking Details, then selection the options link

27. Chrome APIs
•Stable APIs
•Beta APIs
•Dev APIs
•Experimental APIs

28. Chrome APIs: Stable APIs
• Bookmarks
• Commands
• contextMenus
• Cookies
• desktopCapture
• Downloads
• Events
• History
• Identity (OAuth2)
• Tabs
• Sessions
• Storage

29. Test Chrome Extension

30. React Chrome Extension Repo
https://github.com/FullStack-Academy-Kiev/react-chrome-extension

31. Q & A
Thank you