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