Chrome Extension

1. Browser Statistics
• IE
• Chrome
• Firefox
• Safari
• Others

2. Chrome Extension
--- Louisa Chen

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]

12. Content Script Messaging - Video

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

17. Chrome Extensions Recommendation(When?)

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: