Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction of chrome
extension development
balduran@
Agenda
What’s chrome extension
Types of chrome extension
development/testing
Deploying
Q&A
Chrome Extension
Small downloaded plugin that allow you adding new functionality to the chrome
browser
Types of extension
Browser action
Page action
Context menu
Background script
Content script
Dev tools
UI
Browser action for most pages
UI
Page action, active or inactive depending on the page
Context menu
Context menu items can appear in any document
Context Menu
Data flow between UI and background
Architecture
Background task
A single long-running script to manage some task or state
Only one instance is active per extension
Backgr...
Content script
Run in the context of web pages
Can read details of the web pages the browser visits, or make changes to th...
Dev tool
Option + command + I
Development/testing
1. Create project
2. Write codes
3. Load extension
4. test/debug feature
5. Upload to chrome web store
Development/testing
Project structure
Manifest file (manifest.json)
Generator http://extensionizr.com
Background script/co...
Manifest.json
Version
Name
Permissions
Browser_action
Content_scripts
Background
icons
Permission
Host permission
Match Patterns
Schema
http
file
Permission and chrome.* API
API document
https://developer.chrome.com/extensions/api_index
Some API need extra permission
...
chrome.* API
Three groups
User interface
Browser action, page action
Control browser
Windows, tabs, bookmakrs, history, co...
Chrome.runtime API
retrieve the background page, return details about
the manifest, and listen for and respond to events i...
Chrome.activeTab API
interact with the browser's tab system
executeScript
Injects JavaScript code into a page
insertCSS
In...
Resource files
Two main resource files
Icon.png
popup.html
Load expension
chrome://extensions/
Debugging
Deploy
signup fee: 5 USD
Upload extension
provisioning
Chrome web store dashboard
https://chrome.google.com/webstore/developer/dashboard
Appendix
https://developer.chrome.com/webstore/using_webstore_api
Provisioning by API
Upcoming SlideShare
Loading in …5
×

Introduction of chrome extension development

Introduction of chrome extension development

  • Login to see the comments

Introduction of chrome extension development

  1. 1. Introduction of chrome extension development balduran@
  2. 2. Agenda What’s chrome extension Types of chrome extension development/testing Deploying Q&A
  3. 3. Chrome Extension Small downloaded plugin that allow you adding new functionality to the chrome browser
  4. 4. Types of extension Browser action Page action Context menu Background script Content script Dev tools
  5. 5. UI Browser action for most pages
  6. 6. UI Page action, active or inactive depending on the page
  7. 7. Context menu Context menu items can appear in any document Context Menu
  8. 8. Data flow between UI and background Architecture
  9. 9. Background task A single long-running script to manage some task or state Only one instance is active per extension Background page or event page?? Persistent: true // it’s background page Persistent: false // it’s event page
  10. 10. Content script Run in the context of web pages Can read details of the web pages the browser visits, or make changes to them Multiple instance(1 per tab) per extension Cannot call some chrome.* API Cannot access variables/functions defined by web pages
  11. 11. Dev tool Option + command + I
  12. 12. Development/testing 1. Create project 2. Write codes 3. Load extension 4. test/debug feature 5. Upload to chrome web store
  13. 13. Development/testing Project structure Manifest file (manifest.json) Generator http://extensionizr.com Background script/content script Resource files (UI implementation) i18n
  14. 14. Manifest.json Version Name Permissions Browser_action Content_scripts Background icons
  15. 15. Permission Host permission Match Patterns Schema http file
  16. 16. Permission and chrome.* API API document https://developer.chrome.com/extensions/api_index Some API need extra permission Chrome.management need management permission
  17. 17. chrome.* API Three groups User interface Browser action, page action Control browser Windows, tabs, bookmakrs, history, cookies Communicate with server Content script, XHR
  18. 18. Chrome.runtime API retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle
  19. 19. Chrome.activeTab API interact with the browser's tab system executeScript Injects JavaScript code into a page insertCSS Injects CSS into a page
  20. 20. Resource files Two main resource files Icon.png popup.html
  21. 21. Load expension chrome://extensions/
  22. 22. Debugging
  23. 23. Deploy signup fee: 5 USD Upload extension provisioning
  24. 24. Chrome web store dashboard https://chrome.google.com/webstore/developer/dashboard
  25. 25. Appendix https://developer.chrome.com/webstore/using_webstore_api Provisioning by API

×