Successfully reported this slideshow.

Intro chrome extensions

1

Share

Upcoming SlideShare
Introduction to Node.js
Introduction to Node.js
Loading in …3
×
1 of 28
1 of 28

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

Editor's Notes

  • Web apps that take advantage of the fact that they are not running inside the browser container: no CORS restriction Cross origin resource sharing
  • Can be ported to Firefox browser
  • History:
    Before the Internet, we just argued about which language to write an app in. All apps were native. If you ran on Windows you had to have an app that compiled down to windows machine code and if it ran on unix it had to compile to that. If it was a IBM 3070 app it had to run in OS/VS.
    Once app devs realized that the web was a great place to deliver applications as well as documents, it became a question as to what kind of architecture and languages best supported that. We’ve gone through many mutations. You can look up things like Apache CGI, Tomcat, ASP, ASP.Net, and now we have JavaScript Frameworks talking to Rest interfaces. As you look for ways to encode your solutions, it seems to me that the closer your solution is to be based on Standards the longer life it will have. Chrome Extensions can be written in standard based HTML, CSS and JavaScript. They can also be converted to native mobile apps using Cordova.
  • History:
    Before the Internet, we just argued about which language to write an app in. All apps were native. If you ran on Windows you had to have an app that compiled down to windows machine code and if it ran on unix it had to compile to that. If it was a IBM 3070 app it had to run in OS/VS.
    Once app devs realized that the web was a great place to deliver applications as well as documents, it became a question as to what kind of architecture and languages best supported that. We’ve gone through many mutations. You can look up things like Apache CGI, Tomcat, ASP, ASP.Net, and now we have JavaScript Frameworks talking to Rest interfaces. As you look for ways to encode your solutions, it seems to me that the closer your solution is to be based on Standards the longer life it will have. Chrome Extensions can be written in standard based HTML, CSS and JavaScript. They can also be converted to native mobile apps using Cordova.
  • History:
    Before the Internet, we just argued about which language to write an app in. All apps were native. If you ran on Windows you had to have an app that compiled down to windows machine code and if it ran on unix it had to compile to that. If it was a IBM 3070 app it had to run in OS/VS.
    Once app devs realized that the web was a great place to deliver applications as well as documents, it became a question as to what kind of architecture and languages best supported that. We’ve gone through many mutations. You can look up things like Apache CGI, Tomcat, ASP, ASP.Net, and now we have JavaScript Frameworks talking to Rest interfaces. As you look for ways to encode your solutions, it seems to me that the closer your solution is to be based on Standards the longer life it will have. Chrome Extensions can be written in standard based HTML, CSS and JavaScript. They can also be converted to native mobile apps using Cordova.
  • History:
    Before the Internet, we just argued about which language to write an app in. All apps were native. If you ran on Windows you had to have an app that compiled down to windows machine code and if it ran on unix it had to compile to that. If it was a IBM 3070 app it had to run in OS/VS.
    Once app devs realized that the web was a great place to deliver applications as well as documents, it became a question as to what kind of architecture and languages best supported that. We’ve gone through many mutations. You can look up things like Apache CGI, Tomcat, ASP, ASP.Net, and now we have JavaScript Frameworks talking to Rest interfaces. As you look for ways to encode your solutions, it seems to me that the closer your solution is to be based on Standards the longer life it will have. Chrome Extensions can be written in standard based HTML, CSS and JavaScript. They can also be converted to native mobile apps using Cordova.
  • History:
    Before the Internet, we just argued about which language to write an app in. All apps were native. If you ran on Windows you had to have an app that compiled down to windows machine code and if it ran on unix it had to compile to that. If it was a IBM 3070 app it had to run in OS/VS.
    Once app devs realized that the web was a great place to deliver applications as well as documents, it became a question as to what kind of architecture and languages best supported that. We’ve gone through many mutations. You can look up things like Apache CGI, Tomcat, ASP, ASP.Net, and now we have JavaScript Frameworks talking to Rest interfaces. As you look for ways to encode your solutions, it seems to me that the closer your solution is to be based on Standards the longer life it will have. Chrome Extensions can be written in standard based HTML, CSS and JavaScript. They can also be converted to native mobile apps using Cordova.
  • Browser Action: icon in google chrome toolbar (can also have a tooltip, a badge and a popup) for all pages
    Page Action: icon will not be enabled unless the page has meets some criteria
    Note that tooltip will show whether or not the icon is enabled
  • https://developer.chrome.com/extensions/messaging
  • ×