Making Chrome Extension with AngularJS
Upcoming SlideShare
Loading in...5
×
 

Making Chrome Extension with AngularJS

on

  • 11,697 views

A presentation in 2nd Hong Kong Web Developers Meetup

A presentation in 2nd Hong Kong Web Developers Meetup

Statistics

Views

Total Views
11,697
Slideshare-icon Views on SlideShare
10,661
Embed Views
1,036

Actions

Likes
12
Downloads
50
Comments
2

17 Embeds 1,036

http://blog.takuti.me 556
http://benlaux.blogspot.hk 250
http://benlaux.blogspot.tw 134
http://benlaux.blogspot.com 51
http://localhost 21
http://benlaux.blogspot.ru 6
http://benlaux.blogspot.co.uk 3
http://benlaux.blogspot.ca 2
http://benlaux.blogspot.jp 2
http://benlaux.blogspot.com.br 2
https://twitter.com 2
http://benlaux.blogspot.gr 2
http://benlaux.blogspot.sg 1
https://www.google.co.jp 1
http://benlaux.blogspot.com.tr 1
http://benlaux.blogspot.de 1
http://benlaux.blogspot.kr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for the overview, found it useful!
    Are you sure you want to
    Your message goes here
    Processing…
  • this is a tutorial to make a chrome extension to angularjs http://dev.stasbranger.com/post/79559321684/creare-una-chrome-extension-con-angularjs
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Making Chrome Extension with AngularJS Making Chrome Extension with AngularJS Presentation Transcript

    • 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
    • Thank you