SlideShare a Scribd company logo

Chrome extension 2014.08.03

•Download as PPTX, PDF•
•
L
louisasea666

This document provides an overview of Chrome extensions including what they are, why they are useful, who should use them, how to build one, and how to package and deploy an extension. Chrome extensions allow additional functionality and customization to the Chrome browser. They are easy to use, automatically update, and can sync across devices. The document demonstrates how to create a basic "Hello World" extension and covers extension structure, communication methods, common APIs, and the packaging/deployment process through the Chrome Web Store.

1 of 19
Browser Statistics • IE • Chrome • Firefox • Safari • Others
Chrome Extension --- Louisa Chen
Agenda • What is Chrome Extension？ • Why Use Chrome Extension? • Who is Fit to Use Chrome Extension? • How to Build a Chrome Extension? • Demo • Package and Deploy Chrome Extension • Demo • Chrome Extensions Recommendation(When?)
What is Chrome Extension? – Video & Practice
What is Chrome Extension? • Applications that run inside the Chrome browser and provide additional functionality, and customized browsing experience. • It’s an app within your browser.
Why use Chrome extension? • Functionality • Accessibility • Productivity • One Click Access • Simple, directly use after install • Each process is independent, one chrome extension cannot impact whole chrome browser • Updates are done automatically • Synced across all chrome browsers • If an extension doesn’t work, delete it
Who is Fit to Use Chrome Extension? • First, who likes to use Chrome Browser • Who likes simple and pithiness • Who has a google account and need synchronize data in different platforms
How to build a chrome extension? Demo – Hello World You can learn: - How to build a chrome extension? - How to load a dev chrome extension in local machine?
How to build a chrome extension? 1. Create a directory with a new file called manifest.json, along with any needed files; 2. Write the manifest file 3. Go to Chrome Extensions 4. Check “Developer Mode” on the top right 5. Click “Load unpacked extension…” 6. Locate your directory
Structure of extension • Compressed file(.crx) composed of: - Manifest file [JSON-formatted] - Optional HTML/CSS files - Optional Javascript files - Statics(images etc.)
Chrome Extension Communication 1. Demo1 - Background [BrowserAction without popup] 2. Demo2 – Background_Browser [BrowserAction with popup] 3. Demo3 – PageActionSample1 [PageAction] 4. Demo4 – HellowWorld2 [ContentScript]
Content Script Messaging - Video
Chrome Extension API • Insert User Pages • Browser Actions • Page Actions • Operate Chrome Function • Windows, tabs • Bookmarks • History • Cookies • Communicate with pages or server • Content script • Cross-origin XMLHttpRequest
Package and Deployment Demo – Package and Deploy one Demo. You can learn: - How to package and deploy chrome extension?
Package • Chrome Extensions provide a packaged format called CRX. • However, we’re not creating CRX packages because we usually distribute our extension through the Chrome Web Store • Therefore, all we need to do is zip our extension and upload it to the chrome web store.
Deployment • Go to Chrome Web Store, and open up the developer dashboard • Upload your zip file • Select whether you want to use a closed group or to publish it to the store
Chrome Extensions Recommendation(When?)
Resources • Chrome Extension’s Documentation • https://developer.chrome.com/extensions • Google Chrome Extensions Site • https://chrome.google.com/webstore/category/apps?hl=en-US&gl=US • Chrome Extensions Samples • https://developer.chrome.com/extensions/samples#search:
Chrome extension 2014.08.03

More Related Content

Chrome extension 2014.08.03

  • 1. Browser Statistics • IE • Chrome • Firefox • Safari • Others
  • 3. Agenda • What is Chrome Extension？ • Why Use Chrome Extension? • Who is Fit to Use Chrome Extension? • How to Build a Chrome Extension? • Demo • Package and Deploy Chrome Extension • Demo • Chrome Extensions Recommendation(When?)
  • 4. What is Chrome Extension? – Video & Practice
  • 5. What is Chrome Extension? • Applications that run inside the Chrome browser and provide additional functionality, and customized browsing experience. • It’s an app within your browser.
  • 6. Why use Chrome extension? • Functionality • Accessibility • Productivity • One Click Access • Simple, directly use after install • Each process is independent, one chrome extension cannot impact whole chrome browser • Updates are done automatically • Synced across all chrome browsers • If an extension doesn’t work, delete it
  • 7. Who is Fit to Use Chrome Extension? • First, who likes to use Chrome Browser • Who likes simple and pithiness • Who has a google account and need synchronize data in different platforms
  • 8. How to build a chrome extension? Demo – Hello World You can learn: - How to build a chrome extension? - How to load a dev chrome extension in local machine?
  • 9. How to build a chrome extension? 1. Create a directory with a new file called manifest.json, along with any needed files; 2. Write the manifest file 3. Go to Chrome Extensions 4. Check “Developer Mode” on the top right 5. Click “Load unpacked extension…” 6. Locate your directory
  • 10. Structure of extension • Compressed file(.crx) composed of: - Manifest file [JSON-formatted] - Optional HTML/CSS files - Optional Javascript files - Statics(images etc.)
  • 11. Chrome Extension Communication 1. Demo1 - Background [BrowserAction without popup] 2. Demo2 – Background_Browser [BrowserAction with popup] 3. Demo3 – PageActionSample1 [PageAction] 4. Demo4 – HellowWorld2 [ContentScript]
  • 13. Chrome Extension API • Insert User Pages • Browser Actions • Page Actions • Operate Chrome Function • Windows, tabs • Bookmarks • History • Cookies • Communicate with pages or server • Content script • Cross-origin XMLHttpRequest
  • 14. Package and Deployment Demo – Package and Deploy one Demo. You can learn: - How to package and deploy chrome extension?
  • 15. Package • Chrome Extensions provide a packaged format called CRX. • However, we’re not creating CRX packages because we usually distribute our extension through the Chrome Web Store • Therefore, all we need to do is zip our extension and upload it to the chrome web store.
  • 16. Deployment • Go to Chrome Web Store, and open up the developer dashboard • Upload your zip file • Select whether you want to use a closed group or to publish it to the store
  • 18. Resources • Chrome Extension’s Documentation • https://developer.chrome.com/extensions • Google Chrome Extensions Site • https://chrome.google.com/webstore/category/apps?hl=en-US&gl=US • Chrome Extensions Samples • https://developer.chrome.com/extensions/samples#search: