Chrome extension 2014.08.03
Post on 13-May-2015
315 Views
Preview:
DESCRIPTION
Transcript
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 file3. Go to Chrome Extensions4. Check “Developer Mode” on the top right5. 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:
top related