Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Chrome Extensions - Backbone in a Spineless World

Presentation describes how Backbone.js could be used within a Chrome extension

Daniel Prentis

on 4 January 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Chrome Extensions - Backbone in a Spineless World

The background script (containing the data model), popup script and content scripts (containing the views) each live in their own separate context. They communicate using
Chrome message passing.

So how can we bind the views to the data model using the
Backbone event mechanisms? To build complex extensions in JavaScript, it's useful to enforce formal development mechanisms. For example, we organize our code in modules and implement unit and integration tests. Backbone is a JavaScript framework which helps us build applications with UIs. It formalizes the notion of views, models and collections - 'MVC'.
Models and collections in Backbone are used to represent objects and arrays.
Views in Backbone are used represent parts of the UI. They may be bound to models and collections to monitor their current state. There are several advantages to using Backbone models and collections over using plain JavaScript objects and arrays:

it's easy to integrate with REST-ful APIs
simple inheritance mechanism
many utility functions provided for working with collections
event handling mechanism to bind with views Simply put, views are a collection of UI fragments, which provide user interaction with the application's data model. So Backbone is a useful framework, but how can we apply it to Chrome extensions? Inherit from Model and Collection with base classes that enable easy synchronization between the different contexts using message passing under the hood: ChromeModel and ChromeCollection A Chrome model or collection is instantiated with a unique generated cid and boolean master flag. Backbone provides us with a generic framework for implementing application UIs. With some effort, it is possible to use this framework within Chrome browser extensions.

The solution described here is experimental and although a proof of concept has been implemented, there may be performance implications for high volume or frequently changing data models. Data Model
(Models and Collections) View View View Event Binding Data Model
(Models and Collections) View View Chrome Message Passing Background Script Content Script View View Popup Script Master Data Model
(Models and Collections) View View Chrome Message Passing Background Script Content Script Slave Data Model
(Models and Collections) View View Popup Script Slave Data Model
(Models and Collections) Slave Data Model Slave Data Model Slave Data Model Slave Data Model Master Data Model Broadcast Message Flow Slave Data Model Slave Data Model Slave Data Model Slave Data Model Master Data Model Broadcast Message Flow Chrome Extensions Backbone in a Spineless World Introduction Backbone Advantages Simulated One Version of the Truth One Version of the Truth What About Chrome? Implementation Details The Problem Summary and Disclaimer Broadcasting from the Background Script Changes are sent to all slave instances of the data model in content scripts and popup scripts. Broadcasting from a Content Script Changes are sent first to the master data model in the background script.

This in turn broadcasts them to all slaves instances. The browser extension's data model should be a singleton structure of models and collections. It should instantiated be in the background script, together with the main application logic. OK, so these would be our views ... In a Chrome browser extension, the UI consists of:

HTML fragments injected into content pages
HTML in browser action / page action popup pages The master data model is stored in background script. An initial request from content script or popup retrieves a copy of it as a plain JavaScript object. The data model is recreated from this using the ChromeModel or ChromeCollection constructor. Changes in the data model from any context (background, content or popup) may be synchronized by making changes to the given instance and calling a parameterless broadcast method. An event handler is created to listen for broadcast changes The cid is used by the broadcast mechanism to identify the specific instance of the model or collection to be updated. The master flag determines whether the model/collection is in the background script and controls the type of broadcast that is executed to propagate changes The broadcast message contains the cid and a payload of updated model or collection data. They don't need to communicate with each other, just with the data model. Event binding of views to the data model ensures, that any relevant views get updated automatically as the data changes. It is also useful to think about the code structure one level up. The user experience is important, so browser extensions must implement some nice (albeit simple) graphical UI.
Full transcript