Your SlideShare is downloading. ×
0
Chrome Extension & Developer Tools Developer Tools <ul><li>Overview </li></ul><ul><li>at </li></ul><ul><li>Bangkok GTUG Bo...
Chrome Extension
Development <ul><li>HTML (XHTML , HTML5) </li></ul><ul><li>CSS (2,3) </li></ul><ul><li>Javascript </li></ul><ul><li>Chrome...
Understand Manifest.json <ul><li>name , version , description </li></ul><ul><li>icons (16,19,32,48,128) </li></ul><ul><li>...
Simple Workshop & Debug <ul><li>Workshop </li></ul><ul><ul><li>Iframe in Popup with Onebitmatter Wallpaper </li></ul></ul>...
Deployment <ul><li>Sign in with Google Account If you don’t have sign up first.  </li></ul><ul><li>Go to  https://chrome.g...
Sneak Peak <ul><li>Choose your extension that you want in  https://chrome.google.com/extensions/ </li></ul><ul><li>Right C...
Chrome Developer Tools
DEMO TIME <ul><li>http://slides.html5rocks.com </li></ul>
Thank You <ul><li>Contact me  @dominixz  OR  [email_address] </li></ul><ul><li>at </li></ul><ul><li>onebitmatter.com </li>...
Upcoming SlideShare
Loading in...5
×

Chrome Extension Development

1,441

Published on

You can download sourcecode at http://dominixz.com/wp-content/uploads/misc/bkk_gtug_chrome_extension_sourcecode.zip

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,441
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Chrome Extension Development"

  1. 1. Chrome Extension & Developer Tools Developer Tools <ul><li>Overview </li></ul><ul><li>at </li></ul><ul><li>Bangkok GTUG Bootcamp 2011 </li></ul>
  2. 2. Chrome Extension
  3. 3. Development <ul><li>HTML (XHTML , HTML5) </li></ul><ul><li>CSS (2,3) </li></ul><ul><li>Javascript </li></ul><ul><li>Chrome Extension API </li></ul>
  4. 4. Understand Manifest.json <ul><li>name , version , description </li></ul><ul><li>icons (16,19,32,48,128) </li></ul><ul><li>browser_action , background_page , options_page </li></ul><ul><li>permissions , content_scripts </li></ul><ul><li>chrome_url_overrides (newtab,bookmark manager,history) </li></ul>
  5. 5. Simple Workshop & Debug <ul><li>Workshop </li></ul><ul><ul><li>Iframe in Popup with Onebitmatter Wallpaper </li></ul></ul><ul><li>Tips & Extension Overview </li></ul><ul><ul><li>Copy Text without Textfield </li></ul></ul><ul><ul><li>Get Current URL & chrome.tabs.create </li></ul></ul><ul><ul><li>Web Service , etc. </li></ul></ul>
  6. 6. Deployment <ul><li>Sign in with Google Account If you don’t have sign up first. </li></ul><ul><li>Go to https://chrome.google.com/extensions/ </li></ul><ul><li>Click “Publish your extensions” at Left , Bottom </li></ul><ul><li>ZIP your root folder & Upload (If not success check error) </li></ul><ul><li>Write your detail & upload icon,ss,header (optional) </li></ul>
  7. 7. Sneak Peak <ul><li>Choose your extension that you want in https://chrome.google.com/extensions/ </li></ul><ul><li>Right Click and Save As then Rename to exname.zip </li></ul><ul><ul><li>Mac : Open Termianl , Go to Path , unzip exname.zip </li></ul></ul><ul><ul><li>Windows : 7-Zip. Right Click at Zip then extract to folder </li></ul></ul>
  8. 8. Chrome Developer Tools
  9. 9. DEMO TIME <ul><li>http://slides.html5rocks.com </li></ul>
  10. 10. Thank You <ul><li>Contact me @dominixz OR [email_address] </li></ul><ul><li>at </li></ul><ul><li>onebitmatter.com </li></ul>
  1. A particular slide catching your eye?

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

×