Making Chrome Extension with AngularJS
-
Upload
ben-lau -
Category
Technology
-
view
28.427 -
download
0
Transcript of Making Chrome Extension with AngularJS
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