Slide 1

Slide 1 text

Web Technologies GDE Arnelle Balane @arnellebalane Introduction to building Chrome Extensions

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

chrome.google.com/webstore

Slide 4

Slide 4 text

Chrome Extensions come in different forms

Slide 5

Slide 5 text

Chrome pages overrides Override one of these built-in Chrome pages: ● New Tab ● History ● Bookmark Manager

Slide 6

Slide 6 text

Popups Displays in a special window when the extension’s action icon is clicked

Slide 7

Slide 7 text

Side panels Remains open while the user navigates between tabs

Slide 8

Slide 8 text

Content scripts Directly interact with and modify the pages in the browser

Slide 9

Slide 9 text

DevTools pages Adds functionalities to Chrome DevTools using DevTools-specific extension APIs

Slide 10

Slide 10 text

Service workers Scripts that run in the background and listens for and handles browser events

Slide 11

Slide 11 text

Omnibox Context menus

Slide 12

Slide 12 text

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 ✅ ✅

Slide 13

Slide 13 text

Chrome Extensions are built using the same technologies we use to build Web applications

Slide 14

Slide 14 text

What are Chrome Extensions built with? ✨✨✨ Chrome Extensions APIs +

Slide 15

Slide 15 text

What are Chrome Extensions built with? ✨✨✨ Chrome Extensions APIs +

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

The manifest file Defines metadata about the extension, such as name, icon, etc.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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?

Slide 22

Slide 22 text

Passing messages in Chrome Extensions

Slide 23

Slide 23 text

Passing messages in Chrome Extensions

Slide 24

Slide 24 text

Passing messages in Chrome Extensions data passed between popup and content script

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Demo time! github.com/arnellebalane/word-counter

Slide 27

Slide 27 text

developer.chrome.com/docs/extensions/reference Check out the Chrome Extensions APIs

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Publishing your Chrome Extensions In the Chrome Web Store console, add a new item, fill out your extension’s details, and submit for review

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Thank you! Web Technologies GDE Arnelle Balane @arnellebalane Introduction to building Chrome Extensions