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.

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