Talk about Chrome Extensions

1. Chrome Extensions:
How to Build
2018
Becky Peltz
peltzr@seattleu.edu
WATS April Meetup
1

2. 2
XKCD

3. Bio
BA, MBA University of Washington
Coding professionally since 1982
Application Developer
Many languages, Many architectures, Much technology
Solving problems!
Focus on fundamentals and standards
Companies include: Boeing, REI, Regence, Microsoft, go2Net, Expeditors, UW,
Seattle Public Schools, Seattle Children’s Hospital, F5 Networks, zulily, Globys,
Schweitzer Engineering Labs, North Seattle College, City University, Seattle
University
3

4. Agenda
What are Chrome Extensions?
Why spend time learning this?
Look at examples
Architecture of a Chrome Extension
Build them
Host them
Debugging & Performance
4

5. What are chrome extensions
Extensions are made from languages familiar to web
developers: HTML, CSS, JavaScript
5

6. What are chrome extensions
Use Chrome’s API to control inside and outside browser
window
https://developer.chrome.com/extensions/api_index
6

7. What are chrome extensions
Anchored to the Chrome Browser but not constrained to it -
no CORS
7

8. What are chrome extensions
API’s that give access to what’s inside a web page and
browser
8

9. Why Spend Time Learning This?
The web is a great place to solve problems
Use your web skills to solve problems
9

10. Why Spend Time Learning This?
Modular solutions to focused problems
You spend a lot of time in a browser so this is a good place to
implement a solution
10

11. Why Spend Time Learning This?
Web application without cross browser design concerns
11

12. Why Spend Time Learning This?
Experience working on an extension/plugin for a major
application
12

13. Why Spend Time Learning This?
Can make money from these $$
Cheap to host your solution
13

14. What can we do with Extensions?
Make an easily accessible tool
Add features and functionality to the Chrome browser
Access and modify content in web pages
Integrate with other apps
Host up to 20 web apps for $5/year (did I mention it was cheap?)
14

15. “Tip of the Iceberg”
15

16. Will it work?
16

17. Chrome Web Store
(> 8500 extensions in 2010)
Vist the Chrome web store:
https://chrome.google.com/webstore/category/extensions
17
Nothing is impossible, the word itself says ‘I’m possible’.
Audrey Hepburn

18. Examples
Google Earth View
Pablo https://photos.app.goo.gl/K6Uw2R2443ehK8HB3
Distill https://www.sitepoint.com/create-chrome-extension-10-minutes-flat/
Honey
XKCD
Screen Castify
Link Cat
18

19. Honey
19

20. Architecture and Terminology
20

21. Let’s Build and Host
Hello World
Link Cat
HTML Validator
https://docs.google.com/presentation/d/1HgrjKJLu0SeHbOEY_GGabe4YpNWYOWwpr-VlZ9LZqMo/edit?usp=sharing
Language Translator
https://docs.google.com/presentation/d/1LpntvWw-wFOVtw1JnSZLnUpw5iSwnnR2ktfoHfb_MFs/edit#slide=id.p
21

22. Debugging
Click on extension icon
Right click and inspect
Set a breakpoint in popup.js
In the console enter “location.reload()” to reload the code for debugging
Debugging Background pages
Also chrome://inspect/#extensions
22

23. Quick look: Selecting the container when user
selected text
Use this if you want to take action on user selection to help find container.
let select = window.getSelection();
if (select.rangeCount > 0) {
let node = select.getRangeAt(0).startContainer.parentNode;
console.log (node.id, node.name);
}
23

24. Quick look: Messaging using API’s
Send from Content:
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
Send from Extension:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
Receive @ Content or Extension:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
24

25. Quick look: Receiving message from content or
extension using API’s
Receive @ Content or Extension:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
25

26. Performance
Use extensions task manager to analyze memory usage
26

27. Resources
27
Extension github Chrome store
Hello https://github.com/rebeccapeltz/hello-
chrome-ext
HTML Validator https://github.com/rebeccapeltz/html-
validate-ext
https://chrome.google.com/webstore/de
tail/html-
validator/bocbjjpebcmehmadhaiefilfieah
hcmo
Language Translator https://github.com/rebeccapeltz/chrome
-ext-translator
https://chrome.google.com/webstore/de
tail/language-
translator/fknddeibkpckpklmdjhpfiaikhfg
ddnb?hl=en
Email Link Category https://github.com/rebeccapeltz/link-cat https://chrome.google.com/webstore/de
tail/email-cat-
link/jomlhocpjgkjikblbginecclpgdkhobm

28. Google Resources
Google Video
https://developer.chrome.com/apps/about_apps
Google Examples
https://developer.chrome.com/apps/samples
28