Develop Chrome Extension

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

Transcript

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 • Chrome APIs • 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 • contentSettings • 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. SlideShare Presentation https://www.slideshare.net/AleksandrGolovatyi/chrome-extension- 107593106
32. Q & A Thank you