chrome extension 2014.08.03

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: