Top Banner
Chrome extension development JavaScript Latvia meetup 08.10.2013
20

Chrome extension development

May 19, 2015

Download

Technology

Introduction to chrome extension development.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Chrome extension development

Chrome extension development

JavaScript Latvia meetup08.10.2013

Page 2: Chrome extension development

Me

● Mārtiņš Balodis● studying at University of Latvia● working at IMCS

● Wasting my spare time on:○ Web Scraping○ Web archiving○ Hadoop/Disco/CouchDB

Page 3: Chrome extension development

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

Page 4: Chrome extension development

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

Page 5: Chrome extension development

manifest.json

● Description● Actions● Permissions

Example:{ "manifest_version": 2, "name": "My Extensions", "version": "versionString", "description": "A plain text description", "icons": {...},

...

}

Page 6: Chrome extension development

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"] } ],}

Page 7: Chrome extension development

Background page

● Common long running script● Communication with pages● No xhr limitations

manifest.json:{ "background": { "scripts": ["background.js"] },}

Page 8: Chrome extension development

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 9: Chrome extension development

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);

Page 10: Chrome extension development

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){}

});

Page 11: Chrome extension development

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();

Page 12: Chrome extension development

Options page I

Page 13: Chrome extension development

Options page II

● Simple html page● Standardized CSS in future● Sync

manifest.json:{ "options_page": "options.html",}

Page 14: Chrome extension development

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"}

]);

});

Page 15: Chrome extension development

Override Chrome pages

● Bookmark Manager (chrome://bookmarks)

● History (chrome://history)

● New Tab (chrome://newtab)

Manifest.json:{ "chrome_url_overrides" : { "pageToOverride": "bookmarks" },}

Page 16: Chrome extension development

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.*

Page 17: Chrome extension development

Message passing

● Communication between extension pages● Communication with other extensions

Page 18: Chrome extension development

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);

});

Page 19: Chrome extension development

Receive messages

● Respond asynchronously

chrome.runtime.onMessage.addListener(

function(request, sender, sendResponse) {

console.log(request);

sendResponse({farewell: "goodbye"});

});

Page 20: Chrome extension development

Website Scraper