Introduction of chrome extension development

Internal sharing.

Transcript

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