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