Chrome extension development
3 likes2,937 views
The document provides an overview of developing Chrome extensions using HTML, CSS, and JavaScript. It discusses key aspects of extensions including the manifest file, content scripts that run on web pages, background pages for long-running scripts, browser actions for buttons/pop-ups, context menus, notifications, options pages, and message passing between extension components. The document also covers more advanced features like overriding Chrome pages, developing DevTools panels, and integrating with the omnibox.
![Content Script
● Scripts run within each page
● Executed within an isolated world
manifest.json:
{
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
}](https://image.slidesharecdn.com/chromeextensiondevelopment-131010103945-phpapp02/85/Chrome-extension-development-6-320.jpg)
![Background page
● Common long running script
● Communication with pages
● No xhr limitations
manifest.json:
{
"background": {
"scripts": ["background.js"]
},
}](https://image.slidesharecdn.com/chromeextensiondevelopment-131010103945-phpapp02/85/Chrome-extension-development-7-320.jpg)
![Context menus
manifest.json:
{
"permissions": [
"contextMenus"
],
"icons": {
"16": "icon-bitty.png",
},
}
Background script:
chrome.contextMenus.create({
type: "normal", // "checkbox", "radio", or "separator"
title: "block this ad",
contexts: "page" //,"selection","link","editable","image","video","
audio",
onclick: function(OnClickData , tab){}
});](https://image.slidesharecdn.com/chromeextensiondevelopment-131010103945-phpapp02/85/Chrome-extension-development-10-320.jpg)
![Desktop notifications
manifest.json:
{
"permissions": [
"notifications"
],
}
Create notification:
var notification = webkitNotifications. createNotification(
'48.png', // icon url
'Hello!', // notification title
'Lorem ipsum...' // notification body text
);
notification.show();](https://image.slidesharecdn.com/chromeextensiondevelopment-131010103945-phpapp02/85/Chrome-extension-development-11-320.jpg)
![Omnibox
● Add search suggestions
manifest.json:
{
"omnibox": { "keyword" : " omnix" },
}
Background script:
chrome.omnibox. onInputChanged.addListener(
function(text, suggest) {
suggest([
{content: text + " one", description: "the first one"},
{content: text + " number two", description: "the second entry"}
]);
});](https://image.slidesharecdn.com/chromeextensiondevelopment-131010103945-phpapp02/85/Chrome-extension-development-14-320.jpg)
Chrome extension development
- 1. Chrome extension development JavaScript Latvia meetup 08.10.2013
- 2. Me ● Mārtiņš Balodis ● studying at University of Latvia ● working at IMCS ● Wasting my spare time on: ○ Web Scraping ○ Web archiving ○ Hadoop/Disco/CouchDB
- 3. What is a chrome extension? Extensions run inside the Chrome browser and provide additional functionality. Chrome extensions are built the same way web pages are built: HTML, CSS, JavaScript. ● Installs easily ● Updates automatically ● Runs in a separate process
- 4. What does an extension do? ● Add new features: ○ RSS reader ● Extend web page functionality ○ Enhance facebook UI ● Service client ○ Mail checker ● Enhance chrome browser ○ Advanced history management
- 5. manifest.json ● Description ● Actions ● Permissions Example: { "manifest_version": 2, "name": "My Extensions", "version": "versionString", "description": "A plain text description", "icons": {...}, ... }
- 6. Content Script ● Scripts run within each page ● Executed within an isolated world manifest.json: { "content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] } ], }
- 7. Background page ● Common long running script ● Communication with pages ● No xhr limitations manifest.json: { "background": { "scripts": ["background.js"] }, }
- 8. Browser action Manifest.json: { "name": "My extension", ... "browser_action": { "default_icon":"images/icon19.png", "default_popup": "popup.html", "default_title": "Google Mail" // optional; shown in tooltip }, } Badge text: chrome.browserAction. setBadgeText({ text:"33", tabId:12 });
- 9. Page action ● By default it is hidden ○ Show only when needed Manifest.json: { "browser_action": { "default_icon": "images/icon19.png" "default_title": "Google Mail", "default_popup": "popup.html" }, } Show the page action: chrome.pageAction.show(integer tabId);
- 10. Context menus manifest.json: { "permissions": [ "contextMenus" ], "icons": { "16": "icon-bitty.png", }, } Background script: chrome.contextMenus.create({ type: "normal", // "checkbox", "radio", or "separator" title: "block this ad", contexts: "page" //,"selection","link","editable","image","video"," audio", onclick: function(OnClickData , tab){} });
- 11. Desktop notifications manifest.json: { "permissions": [ "notifications" ], } Create notification: var notification = webkitNotifications. createNotification( '48.png', // icon url 'Hello!', // notification title 'Lorem ipsum...' // notification body text ); notification.show();
- 12. Options page I
- 13. Options page II ● Simple html page ● Standardized CSS in future ● Sync manifest.json: { "options_page": "options.html", }
- 14. Omnibox ● Add search suggestions manifest.json: { "omnibox": { "keyword" : " omnix" }, } Background script: chrome.omnibox. onInputChanged.addListener( function(text, suggest) { suggest([ {content: text + " one", description: "the first one"}, {content: text + " number two", description: "the second entry"} ]); });
- 15. Override Chrome pages ● Bookmark Manager (chrome://bookmarks) ● History (chrome://history) ● New Tab (chrome://newtab) Manifest.json: { "chrome_url_overrides" : { "pageToOverride": "bookmarks" }, }
- 16. Devtools page manifest.json: { "devtools_page": "devtools.html", } devtools.html: chrome.devtools.panels.create("Font Picker", "icon48.png", "panel.html"); APIs chrome.devtools.panels.* chrome.devtools.network.* chrome.devtools.inspectedWindow.*
- 17. Message passing ● Communication between extension pages ● Communication with other extensions
- 18. Send a message To background script: chrome.runtime. sendMessage({CanIHaz: "cheezbuger"}, function(response) { console.log(response.farewell); }); To content script: chrome.tabs.sendMessage(tab_id, {greeting: "hello"}, function(response) { console.log(response.farewell); });
- 19. Receive messages ● Respond asynchronously chrome.runtime. onMessage.addListener( function(request, sender, sendResponse) { console.log(request); sendResponse({farewell: "goodbye"}); });
- 20. Website Scraper