Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro chrome extensions

Talk about Chrome Extensions

  • Login to see the comments

Intro chrome extensions

  1. 1. Chrome Extensions: How to Build 2018 Becky Peltz WATS April Meetup 1
  2. 2. 2 XKCD
  3. 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. 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. 5. What are chrome extensions Extensions are made from languages familiar to web developers: HTML, CSS, JavaScript 5
  6. 6. What are chrome extensions Use Chrome’s API to control inside and outside browser window 6
  7. 7. What are chrome extensions Anchored to the Chrome Browser but not constrained to it - no CORS 7
  8. 8. What are chrome extensions API’s that give access to what’s inside a web page and browser 8
  9. 9. Why Spend Time Learning This? The web is a great place to solve problems Use your web skills to solve problems 9
  10. 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. 11. Why Spend Time Learning This? Web application without cross browser design concerns 11
  12. 12. Why Spend Time Learning This? Experience working on an extension/plugin for a major application 12
  13. 13. Why Spend Time Learning This? Can make money from these $$ Cheap to host your solution 13
  14. 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. 15. “Tip of the Iceberg” 15
  16. 16. Will it work? 16
  17. 17. Chrome Web Store (> 8500 extensions in 2010) Vist the Chrome web store: 17 Nothing is impossible, the word itself says ‘I’m possible’. Audrey Hepburn
  18. 18. Examples Google Earth View Pablo Distill Honey XKCD Screen Castify Link Cat 18
  19. 19. Honey 19
  20. 20. Architecture and Terminology 20
  21. 21. Let’s Build and Host Hello World Link Cat HTML Validator Language Translator 21
  22. 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. 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 (,; } 23
  24. 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( ? "from a content script:" + : "from the extension"); if (request.greeting == "hello") sendResponse({farewell: "goodbye"}); }); 24
  25. 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( ? "from a content script:" + : "from the extension"); if (request.greeting == "hello") sendResponse({farewell: "goodbye"}); }); 25
  26. 26. Performance Use extensions task manager to analyze memory usage 26
  27. 27. Resources 27 Extension github Chrome store Hello chrome-ext HTML Validator validate-ext tail/html- validator/bocbjjpebcmehmadhaiefilfieah hcmo Language Translator -ext-translator tail/language- translator/fknddeibkpckpklmdjhpfiaikhfg ddnb?hl=en Email Link Category tail/email-cat- link/jomlhocpjgkjikblbginecclpgdkhobm
  28. 28. Google Resources Google Video Google Examples 28