Introduction to building Chrome Extensions

Transcript

1. Web Technologies GDE Arnelle Balane @arnellebalane Introduction to building Chrome Extensions
2. What are Chrome Extensions? Applications that run inside the Chrome browser to provide additional functionality, integrate with third-party services, and customize the user’s browsing experience
3. chrome.google.com/webstore
4. Chrome Extensions come in different forms
5. Chrome pages overrides Override one of these built-in Chrome pages: • New Tab • History • Bookmark Manager
6. Popups Displays in a special window when the extension’s action icon is clicked
7. Side panels Remains open while the user navigates between tabs
8. Content scripts Directly interact with and modify the pages in the browser
9. DevTools pages Adds functionalities to Chrome DevTools using DevTools-specific extension APIs
10. Service workers Scripts that run in the background and listens for and handles browser events
11. Omnibox Context menus
12. Chrome Extension capabilities and limitations Chrome pages overrides Popups Side panels Content scripts DevTools pages Service workers Page DOM Chrome APIs DevTools APIs 🤔 Some ❌ ❌ ❌ ❌ ❌ ✅ ❌ ❌ ✅ ❌ ✅ ❌ Very few Some ✅ ✅
13. Chrome Extensions are built using the same technologies we use to build Web applications
14. What are Chrome Extensions built with? ✨✨✨ Chrome Extensions APIs +
15. What are Chrome Extensions built with? ✨✨✨ Chrome Extensions APIs +
16. Word Counter Counts the number of words in the current page and display the count in a popup Let’s pretend to build a Chrome Extension
17. What does our Chrome Extension need? Popup UI Counts the number of words in the web page and sends them to the popup Content script Displays the number of words when extension icon is clicked
18. What does our Chrome Extension need? popup.html popup.css popup.js content-script.js manifest.json 🤔 Popup UI Counts the number of words in the web page and sends them to the popup Content script Displays the number of words when extension icon is clicked
19. The manifest file Defines metadata about the extension, such as name, icon, etc.
20. popup.js content-script.js user opens the extension popup 1 requests number of words from the content script 2 counts the number of words in the current page 3 responds to the popup with the number of words 4 displays number of words in the popup 5
21. popup.js content-script.js user opens the extension popup 1 requests number of words from the content script 2 counts the number of words in the current page 3 responds to the popup with the number of words 4 displays number of words in the popup 5 how?
22. Passing messages in Chrome Extensions
23. Passing messages in Chrome Extensions
24. Passing messages in Chrome Extensions data passed between popup and content script
25. 1 Testing Chrome Extensions in development visit chrome://extensions 2 enable developer mode 3 select load unpacked and select the directory code folder for the extension
26. Demo time! github.com/arnellebalane/word-counter
27. developer.chrome.com/docs/extensions/reference Check out the Chrome Extensions APIs
28. Publishing your Chrome Extensions Create a Chrome Web Store developer account chrome.google.com/webstore/devconsole There is a one-time registration fee for creating a developer account
29. Publishing your Chrome Extensions In the Chrome Web Store console, add a new item, fill out your extension’s details, and submit for review
30. Random tips on building Chrome Extensions Start with a small and simple prototype Make your extensions available to other browsers Do not publish automatically after the extension is approved in the Chrome Web Store (personal preference lol) Provide a seamless user experience
31. Thank you! Web Technologies GDE Arnelle Balane @arnellebalane Introduction to building Chrome Extensions