Introduction of chrome extension development
•
3 likes•770 views
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.
Report
Share
Introduction of chrome extension development
- 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
- 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
- 22. Debugging
- 23. Deploy signup fee: 5 USD Upload extension provisioning
- 24. Chrome web store dashboard https://chrome.google.com/webstore/developer/dashboard