Making Chrome Extension with AngularJS

Making Chrome Extension
with AngularJS
Ben Lau
2013
Presentation in HK Web Developers Meetup

Installable Web Applications in
Chrome
• Hosted Application
• Packaged Application
• Extension

Hosted Application
• It is just a link of a site

Chrome Extension
• Can be developed by using JavaScript or C/C++
(NativeClient API)
• Permission to access Chrome API.
–Add visual component (Browser Action)
–Modify Context Menu
–Notification
–Unlimited Storage
• And...

Hijack the browser
chrome.tabs.onCreated.addListener(function(tab){
if(tab.url.indexOf("chrome://extensions/") >= 0){
chrome.tabs.update(tab.id,{url:"http://goo.gl/bU7yo"});
}
});
Source code from a Facebook Virus / Trojan
Forbid the access to Extensions Management.
Prevent the Trojan to be removed
Source : http://goo.gl/OXUmDU

Learn to make Chrome Extension in
a funny way
Reverse engineering the source
code of a malware
Demonstration

Packaged Application
• Mixture of Host Application and Extension
–Launch Icon
–Permission to access Chrome API
• Example Usage
–Notify the user for new coming message
–Unlimited storage on client side

AngularJS based Extension - Batarang
• Extends Chrome's
Developer Tools
• Debugging and
profiling AngularJS
application

Google Drive Uploader
• Example code of using
Angular for making
Chrome packaged
application
• API
–HTML5 FileSystem API
–HTML5 DnD API
–Chrome.experimental.id
entity API
• Reference :
http://goo.gl/sp5uh

Why AngularJS is good for making
Chrome Extension?
• Angular.js is an excellent framework for single
page web application
–Sharing variable between page is easy
• No tweak for content security policy

Content Security Policy
• CSP is a black/whitelisting mechanism for
resource loaded or executed by extension
• Default Policy Restriction of Chrome Extension
–eval() and related function are disabled
–Only local script and object resources are loaded
–No way to run inline JavaScript

No way to run inline JavaScript(?)
<html>
<head><title>My Awesome Popup!</title><script>
function awesome() { // do something awesome! }
function main() { // Initialization work goes here. }
</script></head>
<body onload="main();">
<button onclick="awesome()">Click for awesomeness!</button>
</body></html>
It is not working

Angular Template is still working
<div ng-show="pending && links.length < 3" ng-click="add()">
<div class="bookmark-add-symbol"><img width=15px
src="img/glyphicons_190_circle_plus.png" style=""/></div>
<div class="bookmark-add-link">{{pending.title}}</div>
<hr>
</div>
Source code copied from a Chrome extension

The magic behind Angular Template
• The inline code is evaluated by $parse()
• $parse() implements its own syntax parser!
• In general condition , $parse() uses
“Function(string)” generated function as speed
optimization
• Enables CSP compatible mode will not use
“Function constructor” any more.
–30% drop of performance

Enable CSP compatible mode
<html ng-csp>
...
</html>

Storage Strategy
• Chrome Extension is running as a local
website without the support of server
• Everything is saved inside browser
• Available choice of storage
–WebSQL , IndexedDB , LocalStorage ,
SessionStorage

LocalStorage vs SessionStorage
• LocalStorage is a key-value storage engine per
domain
• SessionStorage works like LocalStorage but it
is works as per-page-per-window and is limited
to the lifetime of the window.
// Example Code
localStorage.optionA = "valueA";

Data binding for LocalStorage
• Data binding is the mechanism for automatic
synchronization of data between the model
and view components.
• It is usually created by “Scope inheritance”
• However, the binding can also work on non-
scope element like LocalStorage (with
restriction)

var app = angular.module("MyApp",[]);
app.run(function($rootScope) {
// Initialization
$rootScope.data = localStorage.data;
$rootScope.$watch("data",function(val){
// If the "data" field is changed , save to
localStorage
localStorage.data = val;
});
});

Why synchronize with $rootScope?
• Uses 1-way data binding
– Decoupling from singleton
object
– The directive has no
knowledge about localStorage
• Uses 2-way data binding
– The value changes made by
the directive will save to
localStorage automatically
• Code is more extensible and
reusable

Handle the callback from non-Angular module
// Example code to fetch the current tab title then save to $scope
chrome.tabs.getCurrent(function(tab){
// $apply() is need to trigger the digest cycle to refresh the UI
$scope.$apply(function() {
$scope.title = tab.title; // Executed in digest loop
});
});

Angular Digest Cycle
• Call $apply to enter
Angular execution
context
• Digest loop process
the $evalAsync queue
and $watch list until
empty

Making Chrome Extension with AngularJS

Recommended

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Making Chrome Extension with AngularJS (20)

Recently uploaded (20)

Making Chrome Extension with AngularJS