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