Chrome extension development
Upcoming SlideShare
Loading in...5
×
 

Chrome extension development

on

  • 1,031 views

Introduction to chrome extension development.

Introduction to chrome extension development.

Statistics

Views

Total Views
1,031
Views on SlideShare
1,030
Embed Views
1

Actions

Likes
0
Downloads
15
Comments
0

1 Embed 1

https://home.jolicloud.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Chrome extension development Chrome extension development Presentation Transcript

  • Chrome extension development JavaScript Latvia meetup 08.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 View slide
  • 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 View slide
  • 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"); APIs chrome.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