Chrome extensions dev Intro

How to createChrome’s ExtensionsLuis Alfredo Porras P. @lporras16

About Me

Rubyist

Colombian

Continuum

Your Friend

Applications that run inside the Chrome browser and provide additional functionality, and customized browsing experiences.

WHAT ARE EXTENSIONS?

We have to learn a new language?

“Extensions are written using the same standard web technologies that developers use to create websites.”

ExamplesPopular Extensions

Synced Todo List - WunderList

Save your Links - Pocket

Download Music! - Grooveshark Downloader

http://groovesharkdownload.net/

Building an Extension

Chrome.* APIs

Chrome provides APIs such as chrome.bookmarks and chrome.tab so that

extensions can interact with the browser.

http://developer.chrome.com/extensions/api_index.html

The Manifest

http://developer.chrome.com/extensions/getstarted.html

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

http://developer.chrome.com/extensions/browserAction.html

http://developer.chrome.com/extensions/desktop_notifications.html

http://developer.chrome.com/extensions/omnibox.html

http://developer.chrome.com/extensions/options.html

http://developer.chrome.com/extensions/override.html

http://developer.chrome.com/extensions/pageAction.html

http://developer.chrome.com/extensions/themes.html

Browser Action

http://developer.chrome.com/extensions/browserAction.html

Desktop Notifications

http://developer.chrome.com/extensions/desktop_notifications.html

Page Actions

http://developer.chrome.com/extensions/pageAction.html

OmniBox

Override Pages

Debugging

Load unpacked Extension - Developer Mode

Developer Mode ON

DEMO TIME

My Yify-plugin

https://github.com/lporras/yify-plugin

Yify-plugin In Action

Manifest

Folder Structure

Background page | app.html

GitHub Repo

https://github.com/lporras/yify-plugin

THANKS

Chrome extensions dev Intro

Self Improvement

Chrome web apps and extensions flipped edu

The Top 10 Chrome Extensions for Entrepreneurs

Google Chrome Extensions - DevFest09

Chrome Extensions for Hackers

var title = “ Google Chrome Extensions ”;

10 Overlooked chrome-Extensions-chrome.pdf

for Google Apps Productivity Guide The Gooru’s · 2015-12-15 · Chrome Extensions The Chrome Webstore The Chrome Webstore is an online marketplace of Chrome Extensions, which you

WP Google Chrome Web Dev Presentation

Rapid Application Development AppeX Google Chrome Dev Tools App... · Rapid Application Development AppeX & Google Chrome Dev Tools ... Currently only Google Chrome has the capability

Chrome Extensions Slides Gtugna Kick Off Meeti

Google Chrome Apps and Extensions

Chrome extensions

PostMessage Security in Chrome Extensions · PostMessagein Chrome extensions •Chrome extensions use postMessageAPI to receive messages from external web sites (e.g. translator services)

Top Chrome Extensions for Software Testing

PostMessage Security in Chrome Extensions - OWASP...PostMessagein Chrome extensions •Chrome extensions use postMessageAPI to receive messages from external web sites (e.g. translator

Building Chrome Extensions · “Google Chrome Extensions are applications that run inside the Chrome browser and provide additional functionality, integration with third party websites

Browser Extensions in Mozilla Firefox & Google Chrome

Chrome & Opera Extensions - GUG SPŠ Tábor

Building testable chrome extensions

Best Google Chrome Email Checker & Notifier Extensions