Introduction to chrome extension development
5 likes1,137 views
This document provides an introduction and overview of how to build Chrome extensions and apps. It covers what Chrome extensions are, the different types (browser actions, page actions, popups), how to build the extension structure and logic using manifest files, permissions, and communication between parts. It also recommends using Yeoman generators and build tools like Grunt to quickly set up and develop Chrome extensions and apps.
![Chrome manifest
https://developer.chrome.com/extensions/manifest
{
"name": "__MSG_appName__",
"version": "0.0.9",
"manifest_version": 2,
"description": "__MSG_appDescription__",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"scripts/chromereload.js",
"scripts/utility.js",
"scripts/background.js"
]
},
"browser_action":` {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Recally Extension",
"default_popup": "popup.html"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"options_page": "options.html",
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"css": [
"styles/contentscript.css"
],
"js": [
"bower_components/rangy/rangy-core.js",
"bower_components/rangy/rangy-serializer.js",
"scripts/utility.js",
"scripts/contentscript.js"
],
"run_at": "document_end",
"all_frames": false
}
],
"permissions": [
"tabs",
"activeTab",
"contextMenus",
"cookies",
"notifications",
"https://*/*",
"http://*/*"
],
"web_accessible_resources": [
"styles/*",
"scripts/*"
]
}](https://image.slidesharecdn.com/1sgsriq5taglzqptrm4t-signature-942389a42e619b391f3db97b5433b2bc2817b0440f869b7f9ee19ee06d54d490-poli-150121203338-conversion-gate02/85/Introduction-to-chrome-extension-development-17-320.jpg)
![communication: one-time requests
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
- receiving from both
- sending from content script
- sending from background script](https://image.slidesharecdn.com/1sgsriq5taglzqptrm4t-signature-942389a42e619b391f3db97b5433b2bc2817b0440f869b7f9ee19ee06d54d490-poli-150121203338-conversion-gate02/85/Introduction-to-chrome-extension-development-19-320.jpg)
![permissions/APIs
● host permissions
● background
● bookmarks
● clipboardRead
● clipboardWrite
● contentSettings
● contextMenus
● cookies
● debugger
● history
● idle
● management
● notifications
● pageCapture
● tabs
● topSites
● webNavigation
● webRequest
● webRequestBlocking
{
"name": "My extension",
...
"optional_permissions": [ "tabs", "http://www.google.com/" ],
...
}
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/](https://image.slidesharecdn.com/1sgsriq5taglzqptrm4t-signature-942389a42e619b391f3db97b5433b2bc2817b0440f869b7f9ee19ee06d54d490-poli-150121203338-conversion-gate02/85/Introduction-to-chrome-extension-development-22-320.jpg)
Introduction to chrome extension development
- 1. Introduction to Chrome extension development cage@mitac.com.tw
- 2. Agenda 1. What is a Chrome extension/app? 2. Building a Chrome extension 3. How to build Chrome extension fast
- 3. What is a Chrome extension/app?
- 4. Extension - Clip to Evernote Browse action
- 5. Extension - OmniDrive page action
- 7. App - Sunrise Calendar
- 8. Build a Chrome extension
- 9. What can you do with a Chrome extension? use storage (local/sync) build a dev tool browser popup context menu capture tab screen send desktop notification get/modify tabs content
- 10. 3 Kinds https://developer.chrome.com/extensions/overview Browser action - page action - popup
- 13. content scripts ● run in tabs ● DOM access ● isolate scope ● limited chrome.* APIs access ● access to resources via web_accessible_resou rces property
- 14. background pages/events pages ● run in background ● html and js ● full chrome.* APIs access
- 15. popup scripts ● active only when popup is opened ● html and js ● Chrome.* APIs access
- 16. Chrome extension manifest app permissions & resources app content app meta https://developer.chrome.com/extensions/manifest
- 17. Chrome manifest https://developer.chrome.com/extensions/manifest { "name": "__MSG_appName__", "version": "0.0.9", "manifest_version": 2, "description": "__MSG_appDescription__", "icons": { "16": "images/icon-16.png", "128": "images/icon-128.png" }, "default_locale": "en", "background": { "scripts": [ "scripts/chromereload.js", "scripts/utility.js", "scripts/background.js" ] }, "browser_action":` { "default_icon": { "19": "images/icon-19.png", "38": "images/icon-38.png" }, "default_title": "Recally Extension", "default_popup": "popup.html" }, "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "options_page": "options.html", "content_scripts": [ { "matches": [ "http://*/*", "https://*/*" ], "css": [ "styles/contentscript.css" ], "js": [ "bower_components/rangy/rangy-core.js", "bower_components/rangy/rangy-serializer.js", "scripts/utility.js", "scripts/contentscript.js" ], "run_at": "document_end", "all_frames": false } ], "permissions": [ "tabs", "activeTab", "contextMenus", "cookies", "notifications", "https://*/*", "http://*/*" ], "web_accessible_resources": [ "styles/*", "scripts/*" ] }
- 19. communication: one-time requests chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { console.log(response.farewell); }); }); chrome.runtime.sendMessage({greeting: "hello"}, function(response) { console.log(response.farewell); }); chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension"); if (request.greeting == "hello") sendResponse({farewell: "goodbye"}); }); - receiving from both - sending from content script - sending from background script
- 20. communication: long-lived connectsion var port = chrome.runtime.connect({name: "knockknock"}); port.postMessage({joke: "Knock knock"}); port.onMessage.addListener(function(msg) { if (msg.question == "Who's there?") port.postMessage({answer: "Madame"}); else if (msg.question == "Madame who?") port.postMessage({answer: "Madame... Bovary"}); }); - opening a channel from a content script chrome.runtime.onConnect.addListener(function(port) { console.assert(port.name == "knockknock"); port.onMessage.addListener(function(msg) { if (msg.joke == "Knock knock") port.postMessage({question: "Who's there?"}); else if (msg.answer == "Madame") port.postMessage({question: "Madame who?"}); else if (msg.answer == "Madame... Bovary") port.postMessage({question: "I don't get it."}); }); }); - receiving on the background page
- 21. communication: others sending messages from web pages native messaging cross-extension messaging
- 22. permissions/APIs ● host permissions ● background ● bookmarks ● clipboardRead ● clipboardWrite ● contentSettings ● contextMenus ● cookies ● debugger ● history ● idle ● management ● notifications ● pageCapture ● tabs ● topSites ● webNavigation ● webRequest ● webRequestBlocking { "name": "My extension", ... "optional_permissions": [ "tabs", "http://www.google.com/" ], ... } http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/
- 23. How to build chrome extension fast
- 24. Yeoman http://yeoman.io yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build. The Build System is used to build, preview and test your project. Grunt and Gulp are two popular options. The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts. Bower and npm are two popular options. THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
- 25. //https://github.com/yeoman/generator-chrome-extension yeoman - generator chrome extension
- 26. getting started - Chrome extension $ npm install -g yo $ npm install -g generator-chrome-extension $ yo chrome-extension $ grunt build $ grunt debug
- 28. getting started - Chrome app $ npm install -g yo $ npm install -g generator-chromeapp $ yo chromeapp $ grunt build $ grunt debug https://github.com/GoogleChrome/chrome-app-samples