Chrome extension development

1,325
-1

Published on

Introduction to chrome extension development.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,325
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Chrome extension development

  1. 1. Chrome extension development JavaScript Latvia meetup 08.10.2013
  2. 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. 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. 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. 5. manifest.json ● Description ● Actions ● Permissions Example: { "manifest_version": 2, "name": "My Extensions", "version": "versionString", "description": "A plain text description", "icons": {...}, ... }
  6. 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. 7. Background page ● Common long running script ● Communication with pages ● No xhr limitations manifest.json: { "background": { "scripts": ["background.js"] }, }
  8. 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. 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. 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. 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. 12. Options page I
  13. 13. Options page II ● Simple html page ● Standardized CSS in future ● Sync manifest.json: { "options_page": "options.html", }
  14. 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. 15. Override Chrome pages ● Bookmark Manager (chrome://bookmarks) ● History (chrome://history) ● New Tab (chrome://newtab) Manifest.json: { "chrome_url_overrides" : { "pageToOverride": "bookmarks" }, }
  16. 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. 17. Message passing ● Communication between extension pages ● Communication with other extensions
  18. 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. 19. Receive messages ● Respond asynchronously chrome.runtime. onMessage.addListener( function(request, sender, sendResponse) { console.log(request); sendResponse({farewell: "goodbye"}); });
  20. 20. Website Scraper
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×