Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome's Extension Dev Intro

Chrome's Extension Dev Intro

A brief introduction of what is an extension and How to built one for the Chrome browser that we all love. It includes some example of popular extensions and a little demo of a plugin I built to watch movies from Yify Torrent.

Luis Porras

August 27, 2013
Tweet

More Decks by Luis Porras

Other Decks in How-to & DIY

Transcript

  1. How to create Chrome’s Extensions Luis Alfredo Porras P. @lporras16

  2. About Me Rubyist Colombian Continuum Your Friend

  3. Applications that run inside the Chrome browser and provide additional

    functionality, and customized browsing experiences. WHAT ARE EXTENSIONS?
  4. None
  5. We have to learn a new language? “Extensions are written

    using the same standard web technologies that developers use to create websites.”
  6. Examples Popular Extensions

  7. Synced Todo List - WunderList

  8. Save your Links - Pocket

  9. Download Music! - Grooveshark Downloader

  10. Building an Extension

  11. Chrome.* APIs Chrome provides APIs such as chrome. bookmarks and

    chrome.tab so that extensions can interact with the browser.
  12. The Manifest

  13. 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
  14. Browser Action

  15. Desktop Notifications

  16. Page Actions

  17. OmniBox

  18. Override Pages

  19. Debugging

  20. Load unpacked Extension - Developer Mode

  21. Developer Mode ON

  22. DEMO TIME

  23. My Yify-plugin

  24. Yify-plugin In Action

  25. Manifest

  26. Folder Structure

  27. Background page | app.html

  28. GitHub Repo https://github.com/lporras/yify-plugin

  29. THANKS