Chrome Extensions
Extending the web one line of Javascript at a time
Chrome Web Store
Where does it start?
Javascript
A real world example
Live demo! Nothing can possibly go wrong!
It works!
Why not just use Javascript?
(if the demo gods allowed it)
Javascript is cool and all but....
- Depends on what is on the page itself
- Want to use a Javascript library (e.g. jQuery / Bootstrap) that isn't on the page?
- Going to have to load it up in your code (and possibly host it)
- Bookmark limits: "URLs over 2,000 characters will not work in the most popular web browsers"
http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers - General a pretty hacky solution
Chrome Extensions!
Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS
Little / No Interface
What's in an extension?
- A manifest file
- One or more HTML files (unless the extension is a theme)
- Optional: One or more JavaScript files
- Optional: Any other files your extension needs—for example, image files
Development: just put them in a folder
Distribution: zip them up with .crx extension
Manifest
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": { "128": "icon_128.png" },
"background": {
"persistent": false,
"scripts": ["bg.js"]
},
"permissions": ["http://*.google.com/", "https://*.google.com/"],
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png",
"default_popup": "popup.html"
}
}Architecture (part 1)
-
#1: Background pages
- Invisible page that holds main logic of extension
- 2 types:
-
Event Pages
- opened when needed
-
Persistent Background Pages
- always opened
- state stored in memory
- can be replaced w/ event pages + storage
-
Event Pages
Architecture (part 2)
-
#2 UI pages
- HTML pages that display the extension's UI
- Pages have complete access to each other's DOMs => can invoke functions on each other
Example Scenario:
- Popup's contents: HTML file (popup.html)
- Background page (background.html)
- Popup can invoke functions on the background page.
Architecture (part 3)
-
#3 Content Scripts
- Executes in a special environment a.k.a. an isolated world
- can read & modify DOM of displayed page
- cannot access Javascript variables/functions
- Executes in a special environment a.k.a. an isolated world
- Cannot modify DOM of parent extension's background page
- Can exchange messages w/ parent extension
- Content script / Background page can send message
- Can exchange messages w/ parent extension
Samples!
Demos
01 popup
A simple popup
02 popup
We got a bug!
Debugging
02 popup
CSP?
Content Security Policy (CSP)
- CSP works as a black/whitelisting mechanism
- Default Policy Restrictions:
- Eval and related functions are disabled
- Inline JavaScript will not be executed
- More on next page
- Only local script and and object resources are loaded
- Download libraries and include in your extension
Content Security Policy (CSP)
// popup.js
function main(){ console.log("Main"); };
function clickHandler(){ console.log("You are awesome"); };
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', clickHandler);
main();
});<!-- popup.html - CSP problems -->
<script>
function main(){ console.log("Main"); };
function clickHandler(){ console.log("You are awesome"); };
</script>
<body onload="main();">
<button onclick="clickHandler(this)">Click for awesomeness!</button>
</body><!-- popup.html - Fixed for CSP -->
<script src="popup.js"></script>
<body>
<button>Click for awesomeness!</button>
</body>03 popup
Solved for CSP!
04 popup
No state
05 popup
State with persistent background pages
Communication between pages
- All extension pages execute in same process on the same thread => can make direct function calls to each other
-
Find appropriate pages: use chrome.extension methods
- e.g. getViews() / getBackgroundPage()
- With this you can invoke functions on other pages
07 popup
More communications
chrome.* APIs
- Chrome only functions
- e.g. tabs.create can be used instead of window.open() so you can specify which window to open it in
- Many asynchronous => deal w/ them using callbacks
-
chrome.tabs.create(object createProperties, function callback)
-
- Example synchronous calls
-
string chrome.runtime.getURL()
-
07 popup
Semi-State with event pages
Saving data
- Storage API
- HTML5 web storage API (e.g. localStorage)
- The cloud via server requests
-
Incognito Mode
- Promises that the window will leave no tracks
- Do best to honor this promise
function saveTabData(tab, data) {
if (tab.incognito) {
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage[tab.url] = data; // Persist data ONLY in memory
});
} else {
localStorage[tab.url] = data; // OK to store data
}
}Architecture (part 3)
-
#3 Content Scripts
- Executes in a special environment a.k.a. an isolated world
- can read & modify DOM of displayed page
- cannot access Javascript variables/functions
- Executes in a special environment a.k.a. an isolated world
- Cannot modify DOM of parent extension's background page
- Can exchange messages w/ parent extension
- Content script / Background page can send message
- Can exchange messages w/ parent extension
Demos
08 content script
Not working?
09 content script
Include your scripts
10 content script / bt
Auto inject content
Q & A
Chrome Extensions - extending the web one line of Javascript at a time
By Timothy Lim
