Introduction to 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