Chrome Extension
Limbani Bhavik & Surani Saunak ( Imperial Infosys )
1
Index
 Intro
 Hello World
 Webiness
 Features
 HTML5
 Experiments
Limbani Bhavik & Surani Saunak ( Imperial Infosys ...
Steps
 Create directory
 Create manifest file
 Add icons
 Create popup
 Upload to gallery
 Web Store
 Profit
Limban...
Similarities
 HTML, CSS, and JavaScript
 Development and debugging
 DOM, XHR, HTML5, WebKit, and V8
Limbani Bhavik & Su...
More UI Surfaces
 Browser action
 Page action
 Content scripts
 Desktop notifications
Limbani Bhavik & Surani Saunak (...
More UI Surfaces
 Infobars
 Context menu
Limbani Bhavik & Surani Saunak ( Imperial Infosys )
6
Special Components
 Manifest file
 Background page
 Options page
 API DIAGRAM
 http://www.alexatnet.com/content/googl...
Privileged APIs
 chrome.windows
 chrome.tabs
 chrome.history
 chrome.bookmarks
 chrome.browserAction
 chrome.pageAct...
The Notifier Pattern
 Problem:
 Data tracking
 Item counter
 Item details
 Solution:
 Cross-origin XHR
 Browser-act...
Features
 <canvas>
 <audio> and <video>
 Filters
 Animation
 Web Storage and Web SQL Database
 Desktop notifications...
APIs
 chrome.experimental.infobars
 chrome.experimental.contextMenu
 chrome.experimental.clipboard
 chrome.experimenta...
Thank You….
Limbani Bhavik & Surani Saunak ( Imperial Infosys )
12
Upcoming SlideShare
Loading in...5
×

How to Create Chrome Extension ?

315

Published on

Introduction of Chrome Extension,
Hello World in Chrome Extension,
Webiness in Chrome Extension,
Features of Chrome Extension,
HTML5 in Chrome Extension,
Experiments in Chrome Extension,

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
315
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

How to Create Chrome Extension ?

  1. 1. Chrome Extension Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 1
  2. 2. Index  Intro  Hello World  Webiness  Features  HTML5  Experiments Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 2
  3. 3. Steps  Create directory  Create manifest file  Add icons  Create popup  Upload to gallery  Web Store  Profit Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 3
  4. 4. Similarities  HTML, CSS, and JavaScript  Development and debugging  DOM, XHR, HTML5, WebKit, and V8 Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 4
  5. 5. More UI Surfaces  Browser action  Page action  Content scripts  Desktop notifications Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 5
  6. 6. More UI Surfaces  Infobars  Context menu Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 6
  7. 7. Special Components  Manifest file  Background page  Options page  API DIAGRAM  http://www.alexatnet.com/content/google-chrome-api-diagram Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 7
  8. 8. Privileged APIs  chrome.windows  chrome.tabs  chrome.history  chrome.bookmarks  chrome.browserAction  chrome.pageAction  chrome.extension  chrome.i18n Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 8
  9. 9. The Notifier Pattern  Problem:  Data tracking  Item counter  Item details  Solution:  Cross-origin XHR  Browser-action badge  Popup Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 9
  10. 10. Features  <canvas>  <audio> and <video>  Filters  Animation  Web Storage and Web SQL Database  Desktop notifications Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 10
  11. 11. APIs  chrome.experimental.infobars  chrome.experimental.contextMenu  chrome.experimental.clipboard  chrome.experimental.cookies  chrome.experimental.processes Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 11
  12. 12. Thank You…. Limbani Bhavik & Surani Saunak ( Imperial Infosys ) 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×