Making Chrome Extension with AngularJS

Ben Lau2013Presentation 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 / TrojanForbid 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 ExtensionLaunch Icon

Permission to access Chrome API

Example UsageNotify 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

APIHTML5 FileSystem API

HTML5 DnD API

Chrome.experimental.identity API

Reference : http://goo.gl/sp5uh

Why AngularJS is good for making Chrome Extension?

Angular.js is an excellent framework for single page web applicationSharing 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 Extensioneval() 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(?)

My Awesome Popup! function awesome() { // do something awesome! } function main() { // Initialization work goes here. } Click for awesomeness!

It is not working

Angular Template is still working

{{pending.title}}

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

...

Storage Strategy

Chrome Extension is running as a local website without the support of server

Everything is saved inside browser

Available choice of storageWebSQL , 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 CodelocalStorage.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 bindingThe 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 $scopechrome.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

Thank you

Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline Level

Click to edit the title text format