Chrome extensions dev Intro
-
Upload
luis-porras -
Category
Self Improvement
-
view
630 -
download
5
description
Transcript of Chrome extensions dev Intro
![Page 1: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/1.jpg)
How to createChrome’s ExtensionsLuis Alfredo Porras P. @lporras16
![Page 2: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/2.jpg)
About Me
Rubyist
Colombian
Continuum
Your Friend
![Page 3: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/3.jpg)
Applications that run inside the Chrome browser and provide additional functionality, and customized browsing experiences.
WHAT ARE EXTENSIONS?
![Page 4: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/4.jpg)
![Page 5: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/5.jpg)
We have to learn a new language?
“Extensions are written using the same standard web technologies that developers use to create websites.”
![Page 6: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/6.jpg)
ExamplesPopular Extensions
![Page 7: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/7.jpg)
Synced Todo List - WunderList
![Page 8: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/8.jpg)
Save your Links - Pocket
![Page 10: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/10.jpg)
Building an Extension
![Page 11: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/11.jpg)
Chrome.* APIs
Chrome provides APIs such as chrome.bookmarks and chrome.tab so that
extensions can interact with the browser.
![Page 13: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/13.jpg)
Browser UI
Browser Actions Add icons to the toolbar (extensions only)
Desktop
Notifications
Notify users of important events
Omnibox Add a keyword to the address bar
Options Pages Let users customize your extension
Override Pages Implement your own version of standard browser pages such as
the New Tab page
Page Actions Add temporary icons inside the address bar (extensions only)
Themes Change the overall appearance of the browser
![Page 15: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/15.jpg)
Desktop Notifications
![Page 16: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/16.jpg)
Page Actions
![Page 17: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/17.jpg)
OmniBox
![Page 18: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/18.jpg)
Override Pages
![Page 19: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/19.jpg)
Debugging
![Page 20: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/20.jpg)
Load unpacked Extension - Developer Mode
![Page 21: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/21.jpg)
Developer Mode ON
![Page 22: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/22.jpg)
DEMO TIME
![Page 24: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/24.jpg)
Yify-plugin In Action
![Page 25: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/25.jpg)
Manifest
![Page 26: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/26.jpg)
Folder Structure
![Page 27: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/27.jpg)
Background page | app.html
![Page 28: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/28.jpg)
GitHub Repo
https://github.com/lporras/yify-plugin
![Page 29: Chrome extensions dev Intro](https://reader033.fdocuments.in/reader033/viewer/2022052907/559256091a28ab59628b474f/html5/thumbnails/29.jpg)
THANKS