Chrome extension development
-
Upload
martins-balodis -
Category
Technology
-
view
1.168 -
download
5
description
Transcript of Chrome extension development
![Page 1: Chrome extension development](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/1.jpg)
Chrome extension development
JavaScript Latvia meetup08.10.2013
![Page 2: Chrome extension development](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/2.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/3.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/5.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/6.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/7.jpg)
Background page
● Common long running script● Communication with pages● No xhr limitations
manifest.json:{ "background": { "scripts": ["background.js"] },}
![Page 8: Chrome extension development](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/8.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/9.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/10.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/12.jpg)
Options page I
![Page 13: Chrome extension development](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/13.jpg)
Options page II
● Simple html page● Standardized CSS in future● Sync
manifest.json:{ "options_page": "options.html",}
![Page 14: Chrome extension development](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/14.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/15.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/16.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/17.jpg)
Message passing
● Communication between extension pages● Communication with other extensions
![Page 18: Chrome extension development](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/18.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/19.jpg)
Receive messages
● Respond asynchronously
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(request);
sendResponse({farewell: "goodbye"});
});
![Page 20: Chrome extension development](https://reader031.fdocuments.us/reader031/viewer/2022013102/555ae51ed8b42a62528b5517/html5/thumbnails/20.jpg)
Website Scraper