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

63 views

Published on

Talk about Chrome Extensions

Published in: Software
  • Be the first to comment

Intro chrome extensions

  1. 1. Chrome Extensions: How to Build 2018 Becky Peltz peltzr@seattleu.edu 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 https://developer.chrome.com/extensions/api_index 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: https://chrome.google.com/webstore/category/extensions 17 Nothing is impossible, the word itself says ‘I’m possible’. Audrey Hepburn
  18. 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. 19. Honey 19
  20. 20. Architecture and Terminology 20
  21. 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. 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 (node.id, node.name); } 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(sender.tab ? "from a content script:" + sender.tab.url : "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(sender.tab ? "from a content script:" + sender.tab.url : "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 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. 28. Google Resources Google Video https://developer.chrome.com/apps/about_apps Google Examples https://developer.chrome.com/apps/samples 28

×