Chrome extension development
JavaScript Latvia meetup08.10.2013
Me
● Mārtiņš Balodis● studying at University of Latvia● working at IMCS
● Wasting my spare time on:○ Web Scraping○ Web archiving○ Hadoop/Disco/CouchDB
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
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
manifest.json
● Description● Actions● Permissions
Example:{ "manifest_version": 2, "name": "My Extensions", "version": "versionString", "description": "A plain text description", "icons": {...},
...
}
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"] } ],}
Background page
● Common long running script● Communication with pages● No xhr limitations
manifest.json:{ "background": { "scripts": ["background.js"] },}
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
});
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);
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){}
});
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();
Options page I
Options page II
● Simple html page● Standardized CSS in future● Sync
manifest.json:{ "options_page": "options.html",}
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"}
]);
});
Override Chrome pages
● Bookmark Manager (chrome://bookmarks)
● History (chrome://history)
● New Tab (chrome://newtab)
Manifest.json:{ "chrome_url_overrides" : { "pageToOverride": "bookmarks" },}
Devtools page
manifest.json:{ "devtools_page": "devtools.html",}
devtools.html:chrome.devtools.panels.create("Font Picker", "icon48.png", "panel.html");
APIschrome.devtools.panels.*
chrome.devtools.network.*
chrome.devtools.inspectedWindow.*
Message passing
● Communication between extension pages● Communication with other extensions
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);
});
Receive messages
● Respond asynchronously
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(request);
sendResponse({farewell: "goodbye"});
});
Website Scraper