This document provides an overview of chrome extension development, including the different types of extensions, development and testing process, and deployment to the Chrome Web Store. It discusses the common extension architectures like browser actions, background scripts, content scripts, and permissions needed to access Chrome APIs. The development process involves creating a project structure with a manifest file, writing background and content scripts, testing features locally, and deploying the extension.

1. Introduction of chrome
extension development
balduran@

2. Agenda
What’s chrome extension
Types of chrome extension
development/testing
Deploying
Q&A

3. Chrome Extension
Small downloaded plugin that allow you adding new functionality to the chrome
browser

4. Types of extension
Browser action
Page action
Context menu
Background script
Content script
Dev tools

5. UI
Browser action for most pages

6. UI
Page action, active or inactive depending on the page

7. Context menu
Context menu items can appear in any document
Context Menu

8. Data flow between UI and background
Architecture

9. Background task
A single long-running script to manage some task or state
Only one instance is active per extension
Background page or event page??
Persistent: true // it’s background page
Persistent: false // it’s event page

10. Content script
Run in the context of web pages
Can read details of the web pages the browser visits, or make changes to them
Multiple instance(1 per tab) per extension
Cannot call some chrome.* API
Cannot access variables/functions defined by web pages

11. Dev tool
Option + command + I

12. Development/testing
1. Create project
2. Write codes
3. Load extension
4. test/debug feature
5. Upload to chrome web store

13. Development/testing
Project structure
Manifest file (manifest.json)
Generator http://extensionizr.com
Background script/content script
Resource files (UI implementation)
i18n

14. Manifest.json
Version
Name
Permissions
Browser_action
Content_scripts
Background
icons

15. Permission
Host permission
Match Patterns
Schema
http
file

16. Permission and chrome.* API
API document
https://developer.chrome.com/extensions/api_index
Some API need extra permission
Chrome.management need management permission

17. chrome.* API
Three groups
User interface
Browser action, page action
Control browser
Windows, tabs, bookmakrs, history, cookies
Communicate with server
Content script, XHR

18. Chrome.runtime API
retrieve the background page, return details about
the manifest, and listen for and respond to events in
the app or extension lifecycle

19. Chrome.activeTab API
interact with the browser's tab system
executeScript
Injects JavaScript code into a page
insertCSS
Injects CSS into a page

20. Resource files
Two main resource files
Icon.png
popup.html

21. Load expension
chrome://extensions/

22. Debugging

23. Deploy
signup fee: 5 USD
Upload extension
provisioning

24. Chrome web store dashboard
https://chrome.google.com/webstore/developer/dashboard

25. Appendix
https://developer.chrome.com/webstore/using_webstore_api
Provisioning by API