Language Support for Language Support for Extensible Web BrowsersExtensible Web Browsers

Benjamin Lerner and Dan GrossmanBenjamin Lerner and Dan Grossman

PositionPosition

Browser extensions are a good thingBrowser extensions are a good thing What are extensions?What are extensions? Why use them?Why use them?

Current approaches have important flawsCurrent approaches have important flaws False design tradeoffsFalse design tradeoffs Languages used are poorLanguages used are poor

PL techniques can helpPL techniques can help UI: declarative compositional overlaysUI: declarative compositional overlays Behavior: aspectsBehavior: aspects

22

What are web-browser extensions?What are web-browser extensions?

Downloadable code to customize the browserDownloadable code to customize the browser Different from Different from pluginsplugins

33

Why extensions?Why extensions?

Extensions avoid bloatExtensions avoid bloat Pick and choose the features you wantPick and choose the features you want

Extensions can experimentExtensions can experiment Provide new features after products shipProvide new features after products ship

Wildly popular:Wildly popular: 6,000+ extensions6,000+ extensions 1.5 Billion downloads1.5 Billion downloads

44

What’s wrong with extensions What’s wrong with extensions today?today?

Two browser designs: Firefox and ChromeTwo browser designs: Firefox and Chrome The designs force a trade-off:The designs force a trade-off:

Huge flexibility, Huge flexibility, oror RobustnessRobustness

For both, the programming model is very poorFor both, the programming model is very poor

Why can’t we do better?Why can’t we do better?

55

Programming example: Mouse Programming example: Mouse GesturesGestures

““Right-click-and-drag” Right-click-and-drag” gesturesgestures

Shape of gesture Shape of gesture browser commandbrowser command

Work-alike versions for Work-alike versions for Chrome and FirefoxChrome and Firefox

66

Firefox: flexible but brittleFirefox: flexible but brittle

Firebug + YSlow, Firefinder, FireCookie…Firebug + YSlow, Firefinder, FireCookie… Deliberately extend another extensionDeliberately extend another extension

• http://sixrevisions.com/web-development/10-useful-firefox-extensions-to-http://sixrevisions.com/web-development/10-useful-firefox-extensions-to-supercharge-firebug/supercharge-firebug/

AdBlock Plus + NoScriptAdBlock Plus + NoScript Deliberately break another extensionDeliberately break another extension

• http://hackademix.net/2009/05/04/dear-adblock-plus-and-noscript-users-dear-http://hackademix.net/2009/05/04/dear-adblock-plus-and-noscript-users-dear-mozilla-community/mozilla-community/

Currently no way to distinguish these casesCurrently no way to distinguish these cases

77

Firefox: free-form code injectionFirefox: free-form code injection

aioContent = aioContent = document.getElementById("content");document.getElementById("content");

aioContent.aioNativeRemoveTab = aioContent.aioNativeRemoveTab = aioContent.removeTab;aioContent.removeTab;

eval("aioContent.aioNativeRemoveTab = " eval("aioContent.aioNativeRemoveTab = "

+ + aioContent.aioNativeRemoveTab.toStrinaioContent.aioNativeRemoveTab.toString().replace(g().replace(

'this.selectedTab','this.selectedTab', ''…various replacement …various replacement

code…code…'));'));

aioContent.removeTab = function(aTab) {aioContent.removeTab = function(aTab) { ……various preprocessing…various preprocessing… aioContent.aioNativeRemoveTab(aTab);aioContent.aioNativeRemoveTab(aTab);}}

Get a reference to the main window

Alias the removeTab function

Modify the function at that alias

Replace the original with a call to the modified version

88

Chrome: robust but limitedChrome: robust but limited

StumbleUponStumbleUpon Provides a “toolbar” in the page,Provides a “toolbar” in the page, ……but it’s not a true chrome toolbarbut it’s not a true chrome toolbar

• http://www.stumbleupon.com/sublog/su_chrome_extension/http://www.stumbleupon.com/sublog/su_chrome_extension/

Currently no fix without new APIsCurrently no fix without new APIs

99

Chrome: tightly-constrainedChrome: tightly-constrained

In the background page:In the background page:close_tab:function(tab){close_tab:function(tab){ chrome.tabs.remove(tab.id);chrome.tabs.remove(tab.id);},},

Injected into the main page:Injected into the main page:var ACTION = {var ACTION = { … … "close this tab" : function(){"close this tab" : function(){

connection.postMessage('close_tab');connection.postMessage('close_tab'); },}, … …}}

Predefined object to manipulate tabs

Page communicates to background via postMessage API

1010

Towards a middle groundTowards a middle ground

Goal: flexibility and robustnessGoal: flexibility and robustness Free-form UI extensionFree-form UI extension Benign extensions can extend each otherBenign extensions can extend each other Malicious extensions can’t hurt each otherMalicious extensions can’t hurt each other

Separate techniques for UI and code:Separate techniques for UI and code: UI: Declarative, compositional UI: Declarative, compositional overlaysoverlays Code: Code: aspectsaspects

1111

OverlaysOverlays

Intuition: “Tree-structured patch”Intuition: “Tree-structured patch”

When are overlays successfully applied?When are overlays successfully applied? When are overlays in conflict?When are overlays in conflict? When should overlays be prohibited?When should overlays be prohibited?

<div id=“greeting”>

<p>Hello</p>

</div>

<overlay>

<div id=“greeting”>

<p><b>World</b></p>

</div>

</overlay>

<div id=“greeting”>

<p>Hello</p>

<p><b>World</b></p>

</div>

1212

Compositional overlaysCompositional overlays

The tree-patching part The tree-patching part is fine, but need to:is fine, but need to:

Declare expectations of Declare expectations of the base documentthe base document

Declare invariants Declare invariants asserted by the overlayasserted by the overlay

Can now detect Can now detect conflicting assertionsconflicting assertions

1313

Require “greeting”Last “greeting”(“greeting”, <p><b>World</b></p>)

Require “greeting”Last “greeting”(“greeting”, <p><b>World</b></p>)

Require “greeting”Last “greeting”(“greeting”, <p><b>Toronto</b></p>)

Require “greeting”Last “greeting”(“greeting”, <p><b>Toronto</b></p>)

Last “greeting”

Last “greeting”

Programming redux: using aspectsProgramming redux: using aspects

aioContent = aioContent = document.getElementById("content");document.getElementById("content");

aioContent.aioNativeRemoveTab = aioContent.aioNativeRemoveTab = aioContent.removeTab;aioContent.removeTab;

eval("aioContent.aioNativeRemoveTab = " eval("aioContent.aioNativeRemoveTab = "

+ + aioContent.aioNativeRemoveTab.toStrinaioContent.aioNativeRemoveTab.toString().replace(g().replace(

'this.selectedTab','this.selectedTab', ''…various replacement …various replacement

code…code…'));'));

aioContent.removeTab = function(aTab) {aioContent.removeTab = function(aTab) { ……various preprocessing…various preprocessing… aioContent.aioNativeRemoveTab(aTab);aioContent.aioNativeRemoveTab(aTab);}}

Get a reference to the main window

Alias the removeTab function

Advise field accesses explicitly

Add before advice to the function

aioContent = aioContent = document.getElementById("content");document.getElementById("content");

aioContent.aioNativeRemoveTab = aioContent.aioNativeRemoveTab = aioContent.removeTab;aioContent.removeTab;

at pointcut(field(this.selectedTab) && at pointcut(field(this.selectedTab) &&

within(aioContent.removeTab)) around within(aioContent.removeTab)) around { get { { get { …various replacement code… …various replacement code… }}

};};

at at pointcut(callee(aioContent.removeTab)pointcut(callee(aioContent.removeTab)))

before (aTab) {before (aTab) { ……various preprocessing…various preprocessing…}}

Come to OOPSLA for more details

When are aspects successfully woven?When are aspects successfully woven? When should aspects be prohibited?When should aspects be prohibited?

1414

ConclusionConclusion

Browser extensions are here to stayBrowser extensions are here to stay Programming them needs our helpProgramming them needs our help Two potential techniques:Two potential techniques:

UI: compositional overlaysUI: compositional overlays Code: aspectsCode: aspects

1515