Intro chrome extensions
Download as PPTX, PDF1 like139 views
The document discusses building Chrome extensions. It begins with an introduction to Chrome extensions, noting they are built with web technologies like HTML, CSS, and JavaScript. It then discusses why one would spend time learning to build extensions, including that they allow solving problems within the browser and can be monetized. The document proceeds to provide examples of extensions, describe extension architecture, and demonstrate how to build, host, debug, and improve the performance of extensions. It concludes by providing resources for extension development.
![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](https://image.slidesharecdn.com/introchromeextensions2-180421190951/85/Intro-chrome-extensions-24-320.jpg)
Intro chrome extensions
- 1. Chrome Extensions: How to Build 2018 Becky Peltz [email protected] 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
- 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
Editor's Notes
- #8: Web apps that take advantage of the fact that they are not running inside the browser container: no CORS restriction Cross origin resource sharing
- #9: Can be ported to Firefox browser
- #10: 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.
- #11: 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.
- #12: 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.
- #13: 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.
- #14: 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.
- #21: 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
- #25: https://developer.chrome.com/extensions/messaging