Trash: Cross-Platform Delete

15 May 2014 | By Alex Young | Comments | Tags node modules npm cli

Trash

Trash (GitHub: sindresorhus / trash, License: MIT, npm: trash) is a cross-platform command-line tool for safely deleting files.

Although those of us who are raised on Linux find the indignity of a Trash folder or Recycle Bin annoying, it can be a useful safety net. It has support for Windows, OS X, and Linux:

function win(paths, cb) {
  execFile('./Recycle.exe', ['-f'].concat(paths), {
    cwd: path.join(__dirname, 'vendor', 'cmdutils')
  }, function (err) {
    cb(err);
  });
}

The Linux version has a small script that wraps around trash-cli:

function linux(paths, cb) {
  execFile('./trash-put', paths, {
    cwd: path.join(__dirname, 'vendor')
  }, function (err) {
    if (err && /cannot trash non existent/.test(err.message)) {
      return cb(new Error('Item doesn\'t exist'));
    }

    cb(err);
  });
}

The test is written as an integration test, so it uses Node’s fs module to create and move files:

it('should trash files', function (cb) {
  fs.writeFileSync('fixture', '');
  fs.writeFileSync('fixture2', '');
  fs.writeFileSync('weird\\\\name\\"\'', '');
  assert(fs.existsSync('fixture'));
  assert(fs.existsSync('fixture2'));
  assert(fs.existsSync('weird\\\\name\\"\''));

  trash([
    'fixture',
    'fixture2',
    'weird\\\\name\\"\''
  ], function (err) {
    assert(!err, err);
    assert(!fs.existsSync('fixture'));
    assert(!fs.existsSync('fixture2'));
    assert(!fs.existsSync('weird\\\\name\\"\''));
    cb();
  });
});

Node Roundup: Newman, selenium-test-runner, ncc

14 May 2014 | By Alex Young | Comments | Tags node modules npm chrome http testing

Newman

Newman (GitHub: a85 / Newman, License: Apache, npm: newman) by Prakhar Srivastav is a command-line collection runner for Postman, the HTTP client for Chrome.

Newman allows you to easily run a collection, like this:

newman -u https://www.getpostman.com/collections/cb208e7e64056f5294e5 -e devenvironment.json

In this example, -e is used to supply a JSON file that has configuration options for Postman’s environment. Newman’s readme has more examples and documentation.

selenium-test-runner

selenium-test-runner (GitHub: tkambler / selenium-runner, License: MIT) by Tim Ambler is a library for writing Selenium tests in a blocking style. It uses node-fibers so you can avoid promises and chained expressions.

ncc

ncc

ncc, or node-crome-canvas, (GitHub: indus / ncc, License: MIT, npm: ncc) by Stefan Keim, uses the Chrome remote debugging protocol to build a bridge to the native HTMlCanvasElement and its 2d-Context. That means you can send drawing operations from the server to Chrome.

Here’s an example:

var ncc = require('ncc')

var canvas = ncc();

canvas.width = canvas.height = 256;

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'slateGray';
ctx.fillRect(28, 28, 200, 200)();

Wordchain: An AngularJS/Firebase Word Game

13 May 2014 | By Alex Young | Comments | Tags games firebase angular
Wordchain

Wordchain (GitHub: sonnylazuardi / wordchain, License: MIT) by Sonny Lazuardi is a multiplayer word game made with Firebase, AngularJS, the Google Dictionary API, and the Wikitionary API. It allows you to sign in with Facebook, and complete words in a crossword-like manner.

The code is all modular, dependency-injected Angular classes, so it’s fairly easy to see how it fits together. The main game logic is in js/controllers.js. Here’s the dictionary API search:

$scope.search = function() {
  angular.element('.loader').fadeIn(1000);
  $.get('https://www.googleapis.com/scribe/v1/research?key=AIzaSyDqVYORLCUXxSv7zneerIgC2UYMnxvPeqQ&dataset=dictionary&dictionaryLanguage=en&query='+$scope.word, function(data) {
    console.log(data);
    angular.element('.loader').fadeOut(1000);
    $scope.definitions = data.data[0].dictionary.definitionData;
    $scope.$apply();
  }, 'jsonp');
};

The readme has some details on running it locally, once you’ve got set up with Firebase.

Share SSH Sessions with Nutty

12 May 2014 | By Alex Young | Comments | Tags ssh meteor apps
The Nutty SSH sharing service.

Nutty (GitHub: krishnasrinivas / nuttyapp, License: GPLv3) by Krishna Srinivas is a Meteor application that allows SSH sessions to be shared via a browser. A host connects to a server which can then be shared with other people. Krishna suggests that this could be useful for pair programming or support.

The Nutty server needs some configuration before you can run it yourself – you can set up Google authentication, and it needs Amazon S3 for uploading recordings to S3. If you want to use WebRTC then you can set up PeerJS as well.

It’s an interesting example of Meteor and HTML5 being used to provide a service that would be traditionally run as a system-level daemon.

WebGL D3 with PathGL

09 May 2014 | By Alex Young | Comments | Tags webgl graphics animation d3
A PathGL particle simulation.

“PatrickJS” sent in PathGL (GitHub: adnan-wahab / pathgl, License: GPL, npm: pathgl) by Adnan Wahab. It’s a library for data visualisation with D3.js that allows you to do cool things with WebGL and particles.

The particle physics example looks like this:

var particles = pathgl.sim.particles(1e5);

d3.select('canvas').selectAll('circle')
  .data(particles.unwrap())
  .enter().append('circle')
    .attr('r', function (d,i) { return d.z })
    .attr('cx', function (d,i) { return d.x })
    .attr('cy', function (d,i) { return d.y })
    .shader({ stroke: 'texel(pos.xy).xzwy' });

d3.select('canvas')
  .on('click', particles.reverse);

As you can see, PathGL uses the familiar D3 chained API with an additional shader method that adds texels.

There are other GL-specific methods as well, like uniform, texture, and pipe. These are documented in the API reference.

If you’re already used to D3 but don’t know much about WebGL, then you should take a look at the PathGL documentation for SVG vs. WebGL. It explains how the scenegraph relates to SVG. There’s also a page on GPGPU, a technique for offloading heavy computation to the graphics card.

Declarative Animations with AniJS

08 May 2014 | By Alex Young | Comments | Tags css animation html
AniJS

AniJS (GitHub: anijs / anijs, License: MIT) by Dariel Noel Vila Plagado is a declarative library for CSS animations. There’s a cool example that illustrates the sentence definition API, where the API calls are broken up into a form with separate fields for “if, on, do, to”:

AniJS

The actual markup uses data attributes to define the animation behaviour: data-anijs="if: click, on: footer, do: swing".

The generalised format for this is explained using a simple text diagram in the wiki:

Declaration - Sentence 1; ... ; Sentence n
Sentence    - Definition, ... , Definition n
Definition  - if | on | do | to | before | after | helper

You can also create animations in JavaScript with AniJS.createAnimation.

The project’s wiki has lots of documentation already, with details on how to write before and after functions, run animations repeatedly, and write animations entirely with JavaScript. Parts of the documentation are in Spanish, but there’s enough English in the code examples and comments that I was able to understand it.

Node Roundup: 0.10.28, 0.11.13, CSRF Vulnerability in Express, Generators in Node, Wolfpack

07 May 2014 | By Alex Young | Comments | Tags node modules npm generators testing

Node 0.10.28, 0.11.13

Node has been updated to 0.10.28 and 0.11.13.

Version 0.10.28 was a quick update to the earlier 0.10.27 release, which updates C++ dependencies (openssl, libuv) as well as several core modules. One important change was the update of openssl to 1.0.1g.

CSRF Vulnerability in Express

Connect and Express have a vulnerability in the CSRF middleware component that means you can bypass it by making a GET request with a method override parameter:

Connect’s methodOverride middleware allows an HTTP request to override the HTTP verb with the value of the method post parameter or with the x-http-method-override header. As the declaration order of middlewares determines the execution stack in Connect, it is possible to abuse this functionality in order to bypass the standard Connect’s anti-CSRF protection.

Connect’s CSRF middleware does not check CSRF tokens in case of idempotent verbs (GET/HEAD/OPTIONS, see csurf/index.js). As a result, it is possible to bypass the security control by sending a GET request with a POST MethodOverride header or parameter.

Read more at NibbleSecurity.

Generators in Node

Generators in Node.js: Common Misconceptions and Three Good Use Cases is a post by Marc Harter that explains how generators work from a Node developer’s perspective.

Generators are function executions that can be suspended and resumed at a later point; a lightweight coroutine. This behavior happens using special generator functions (noted by function* syntax) and a couple of new keywords (yield and yield*) which are only used in the context of a generator

Wolfpack

Wolfpack (GitHub: fdvj / wolfpack, License: MIT, npm: wolfpack) by Fernando De Vega is a SailsJS model testing library that uses SinonJS to mock the database and spy on models. That means you don’t need a real database to run unit tests.

If you have Backbone testing backgrounds, this will be familiar to you. When testing a backbone model or collection, you instantiate it and provide mock data to test the methods. Rarely do you need your model or collection to communicate with the server to provide the results. That’s because you want to test your model or collection, not how or if backbone is doing what it is supposed to do.

Browser Audio Encoding, Atom Open Source

06 May 2014 | By Alex Young | Comments | Tags audio encoding mp3 ogg editors atom

Vorbis.js

Joe Sullivan sent in vorbis.js (GitHub: itsjoesullivan/libvorbis.js, License: MIT), a project based on several others that produces Ogg Vorbis from PCM data. It uses Emscripten, and has an event-based API. There’s a full example in the readme, which demonstrates how to configure the necessary memory buffers and encoding options.

Joe has also made a project called iago that can stream Ogg using web workers.

If licensing issues don’t put you off, take a look at libmp3lame.js by Andreas Krennmair. Again, this project makes use of Emscripten to port parts of lame to JavaScript.

Atom is Open Source

Atom is now free and open source. The announcement includes the minor revelation that there are now over 800 Atom packages.

I’ve seen people on Twitter running the Linux version, but people are still dubious about Atom’s performance and the 2 MB file limit. Making it open source seems like a solid first step to creating sustained interest, but it has a Google Wave feel about it.

Private Bower

05 May 2014 | By Alex Young | Comments | Tags bower build-tools

Private bower

If you’ve ever wanted to set up a private Bower repository, private-bower (GitHub: Hacklone/private-bower, License: MIT, npm: private-bower) by Barna Tóth might be what you’re looking for.

You can install it with npm install -g private-bower, and then run it with private-bower. It accepts some command-line options to change what port it listens on, but all you really need to do is add some lines to your .bowerrc file:

{ "registry": "http://localhost:5678" }

That changes the repository Bower will use. Now whenever Bower attempts to fetch a package, it will check your private server.

private-bower itself will serve packages if they’ve been downloaded, otherwise it will fall over to the public repository. It’s built using Express, and the author has put the API methods in the readme so you can see how it works.

Cammy and n3-charts

02 May 2014 | By Alex Young | Comments | Tags animations angular d3
Cammy's demo.

Cammy (GitHub: lorem–ipsum / cammy, License: MIT) by Sébastien Fragnaud (“lorem–ipsum”) is an orthogonal projection camera built on AngularJS and D3.js. The demo is completely gorgeous, so I was compelled to waste a good 15 minutes playing with it. If you look at the source you can see how the Angular directives are used to hook up the UI controls with the renderer.

Sébastien also wrote n3-charts (GitHub: n3-charts / line-chart):

$scope.options = {
  axes: {
    x: {
      key: 'x',
      labelFunction: function(value) { return value; },
      type: 'linear',
      tooltipFormatter: function(x) { return x; }
    },
    y: { type: 'linear' },
    y2: { type: 'linear' }
  },
  series: [{
    y: 'value',
    color: 'steelblue',
    thickness: '2px',
    type: 'area',
    striped: true,
    label: 'Pouet'
  }, {
    y: 'otherValue',
    axis: 'y2',
    color: 'lightsteelblue'
  }],
  lineMode: 'linear',
  tension: 0.7
};

Velocity.js

01 May 2014 | By Alex Young | Comments | Tags animations jquery
From the Velocity Playground teaser.

Julian Shapiro sent in Velocity.js (GitHub: julianshapiro / velocity, License: MIT), a performance-focused animation library that is an alternative to jQuery’s $.animate method. If you’re struggling with CSS animations and would prefer to use JavaScript, then Velocity may help. Judging by the project’s Playground teaser, it seems like it’s more ambitious than just supporting basic animations, however.

Basic animation works as you’d expect if you’ve used $.animate:

$('div').velocity({ top: 50 });

You can supply additional arguments:

$('div').velocity({ opacity: 1 }, { duration: 1000 });

Easing and queues are also supported:

$('div').velocity({
  borderBottomWidth: ['2px', 'spring' ],
  width: '100px',
  height: '100px'
}, {
  easing: 'easeInSine'
});

The documentation has more examples. The source has some useful comments about how the project works, and why it’s fast:

JavaScript and jQuery are falsely conflated. JavaScript animation, which Velocity uses, is fast; it’s jQuery that’s slow. Although Velocity is a jQuery plugin, it uses its own animation stack that delivers its performance through two underlying design principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize the occurrence of DOM querying.

There’s also a post about Velocity on the David Walsh Blog, and the author is promising more features and tests by May 5th.

Node Roundup: Who's Hiring, Melkor, Isosurface

30 Apr 2014 | By Alex Young | Comments | Tags node modules npm jobs graphics es6 generators

npm: Who’s Hiring?

I noticed npm’s blog had a post about who’s hiring in the Node community. There’s a new Who’s Hiring page on npmjs.org, that lists Voxer, The Financial Times, Branding Brand, and Dash.

Melkor

More people are getting interested in Koa.js now, so it’s good to start collecting example applications that use it. Ramesh Nair sent in Melkor (License: MIT), a wiki that uses Waigo which is built on Koa.js, and Git as the storage system.

You can see generators used right away in index.js:

exports.init = function*(folder, options) {
  debug('Folder: ' + folder);

  yield* waigo.init({
    appFolder: path.join(__dirname, 'src')
  });

  var App = waigo.load('application');

  yield* App.start({
    postConfig: function(config) {
      config.startupSteps.unshift('wiki');

      config.middleware.push({ id: 'methodOverride' });

      debug('Port: ' + config.port);
      config.port = options.port;
      config.baseURL = 'http://localhost:' + config.port;

      config.staticResources.folder = '../public/build';

      config.wikiTitle = options.title;
      config.wikiFolder = folder;
    }
  });

  return App;
};

The controllers also make heavy use of yield, so things like form validation and template rendering have a synchronous feel.

Isosurface

Isosurface

Isosurface (GitHub: mikolalysenko / isosurface, License: MIT, npm: isosurface) by Mikola Lysenko is a set of isosurface polygonizer algorithms.

Here’s an example:

var isosurface = require('isosurface');

var mesh = isosurface.surfaceNets([64,64,64], function(x,y,z) {
  return x*x + y*y + z*z - 100;
}, [[-11,-11,-11], [11,11,11]]);

I found this module (and the impressive demo) while looking through Mikola’s graphics related modules on npmjs.org/~mikolalysenko.

Using jQuery UI with AMD

29 Apr 2014 | By Alex Young | Comments | Tags jqueryui jquery libraries amd

As of version 1.11 you can use AMD with jQuery UI. RequireJS will work, or any other AMD compatible loader.

That means you can do this:

require(['jquery-ui/autocomplete'], function(autocomplete) {
  autocomplete({ source: ['One', 'Two', 'Three'] }, '<input>')
    .element
    .appendTo('body');
});

Doesn’t that look a lot better than what we had before (script tags, monolithic $)? The old Autocomplete style would have used $(selector).autocomplete, which is low on syntax but high in coupling. Even though Autocomplete’s API is always going to be coupled to jQuery, I prefer the idea of being able to load it in a modular way, and to potentially be able to inject a different dependency.

The jQuery/jQuery UI stack is still more monolithic than some of the newer MVVM or component-based solutions, but this may help you use some AMD-based techniques with your existing jQuery UI projects.

Also, I know there’s always someone who wants to point out how great Dojo is, so here’s Dojo’s AMD post from 2011.

GestureKit

28 Apr 2014 | By Alex Young | Comments | Tags mobile libraries

GestureKit

GestureKit (GitHub: RoamTouch / gesturekit.js, License: Apache 2.0) by Guille Paz and RoamTouch is an SDK for creating and recognising gestures in mobile interfaces. There’s an open source client-side library that has an event-based API for responding to gestures.

Gestures can be recorded on a mobile device and then used on different platforms. The project’s homepage has examples for Android, iOS, and JavaScript.

GestureKit is backed by a service for storing metrics on gestures. Applications can work offline though, the underlying data is cached on startup.

Right now it seems like the server part of the project is closed source, but the FAQ states that part of the API will be opened, and they’re looking for contributors:

GestureKit has a Github repos for community pushes that you will be able to contribute. We are planning to open a part of the API, specially the actions performed with the gestures and a plugin interface to integrate new stuff to the service.

The thing I like about this project is the idea that you can draw shapes to trigger specific functionality. The example is a music app that uses two arrows to mean skip forward or back.

Managing Node.js Callback Hell, this Considered Harmful

25 Apr 2014 | By Alex Young | Comments | Tags node tutorials

Marc Harter, who is working with me on Node.js in Practice, recently published Managing Node.js Callback Hell:

Callback hell is subjective, as heavily nested code can be perfectly fine sometimes. Asynchronous code is hellish when it becomes overly complex to manage the flow. A good question to see how much “hell” you are in is: how much refactoring pain would I endure if doAsync2 happened before doAsync1? The goal isn’t about removing levels of indentation but rather writing modular (and testable!) code that is easy to reason about and resilient.

The example he uses is nested asynchronous file operations, with a counter to determine completion. This is compared to a version that uses async, and another that uses promises with q.

The post was originally published on StrongLoop’s blog, here: Managing Node.js Callback Hell with Promises, Generators and Other Approaches. StrongLoop’s blog is worth subscribing to if you’re a Node developer – it has general tutorials and coverage of interesting npm modules.

Tom Boutell sent in a blog post about OO in JavaScript, called “this” considered harmful (sometimes):

Most JavaScript implementations of “classes” do have certain features in common. They rely on the “this” keyword to refer to the current object; after all, it’s built into the language. They provide a convenience function to implement subclassing, because it’s tricky to get right, especially in older browsers. And they have a really tough time handling callbacks in methods, because “this” ceases to refer to the object you expect.

Tim Oxley posted some comments discussing how to use Function.prototype.bind as well.

Query IndexedDB Like MongoDB

24 Apr 2014 | By Alex Young | Comments | Tags indexeddb storage apis

Kent Safranski sent in Indexed, a library that wraps around IndexedDB with a friendly MongoDB-inspired API.

You can insert objects like this:

indexed('myDB').insert({
  name: 'John Doe'
  email: 'jdoe@email.com'
}, function(err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

And fetch them again with find:

indexed('myDB').find({
  _id: 28972387982
}, function(err, data) {
});

You can even use MongoDB-style operators:

indexed('myDB').find({
  someNumber: { $gt : 25 }
}, function(err, data) {
});

You’ll probably like this if you work with databases in Node. It’s actually part of a larger project called Riggr, a framework based around RequireJS, Knockout and jQuery. Although I think indexed.js is cool enough that it should be a separate module, rather than being bundled in with Riggr.

Kent wrote a detailed blog post about indexed.js here: Indexed: Query IndexedDB Like Mongo.

Node Roundup: npm-pkgr, Promised Land, Stash.js

23 Apr 2014 | By Alex Young | Comments | Tags node modules npm caching

npm-pkgr

npm-pkgr (GitHub: vvo / npm-pkgr, License: ISC, npm: npm-pkgr) by Vincent Voyer caches npm install results based on your package.json and npm-shrinkwrap.json files.

Depending on your set up, this should reduce the time taken to deploy Node projects. The basic usage is npm-pkgr instead of npm install, and npm-pkgr --production to use npm-shrinkwrap.json.

Promised Land

Promised Land (GitHub: FredyC / promised-land, License: MIT, npm: promised-land) provides a way of wrapping modules with an EventEmitter that allows you to use promises across your application.

For example, let’s say you’ve got a module that connects to a database. Once the connection is ready, it does this:

var Land = require('promised-land');
Land.emit('database:connected', db);

Any other module that needs to know when the database is ready can now do so with promises:

var Land = require('promised-land');
Land.promise('database:connected').then(function(db) {
  doSomethingWithDatabase();
});

It also allows events to be repeated, in a stream-like way:

Land.stream('database:row').onValue(function(val) {
  doSomethingRepeatedly();
});

The project has tests and more examples in the readme.

Stash.js

Stash.js (GitHub: tadeuzagallo / stash.js, License: MIT, npm: stash.js) by Tadeu Zagallo is a multilayer cache manager. That means you can define and use different storage systems for caching, based on “drivers”.

So far the author has added a driver for ephemeral storage and localStorage support for browsers.

Cache items have methods for determining cache miss, locking, and setting values:

var stash = new Stash.Pool();
var item = stash.getItem('my/key/path');
var data = item.get();

if (item.isMiss()) {
  item.lock();
  data = 'example';
  item.set(data, cacheDuration);
}

What lock does here is dependent on the cache policy. There are four policies that are explained in the readme.

DOM4 Elements, ng-Fx

22 Apr 2014 | By Alex Young | Comments | Tags libraries dom queryAll

DOM4 Elements

DOM4 Elements (GitHub: barberboy / dom4-elements, License: MIT) by Ben Barber is a polyfill for document.query and document.queryAll, from the DOM Level 4 ParentNode interface.

Using document.queryAll returns a new class called Elements, which extends Array.prototype so you can do things like document.queryAll('.classname').map(fn).

Browser support is documented by Testling, and the project includes a small test suite.

ng-Fx

ng-Fx (GitHub: Hendrixer/ng-Fx, License: MIT) by Scott Moss is an AngularJS version of Animate.css.

You can use classes to apply effects, then directives to control their behaviour:

<ul ng-init="foods=['apple', 'chips', 'muffin']">
  <li class='fx-fade-down fx-easing-bounce' ng-repeat="food in foods">
    
  </li>
</ul>

Some options are controlled by classes where I expected to see directives – I think the author has tried to use CSS as much as possible rather than using JavaScript to write out style tags to do the necessary styling. For example: fx-speed-800 compared to ng-fx-speed="800". A hypothetical ng-fx-speed could accept any speed rather than predefined ones.

Ripple.js

21 Apr 2014 | By Alex Young | Comments | Tags data-binding mmvm libraries

Ripple.js (GitHub: ripplejs / ripple, License: MIT) from Segment.io is a library for templating and data binding. It’s based around templates, and has a chainable API, allowing plugins to be added to components:

var Person = ripple('<div>{{name}}</div>')
  .use(events)
  .use(each)
  .use(dispatch);

var person = new Person({
  name: 'Tom'
});

person.appendTo(document.body);

The plugins can add directives in a similar way to AngularJS: take a look at each, for example.

There’s a JSFiddle Markdown example that uses a template embedded in a script element, and two plugins: ripple.events and ripple.markdown. The plugins allow changes to be observed on the textarea and Markdown is set to render using a directive on a div element.

One of the features that I like is the pattern for view composition. Views can be embedded, and data will still be synced when it changes.

Also, the library seems well tested, so you can get more usage ideas from the tests.

Live Reloading Chrome Apps, Chrome Extensions with React, sendMessage Tutorial

18 Apr 2014 | By Alex Young | Comments | Tags chrome extensions browsers

Live Reloading Chrome Apps

The Chrome Store itself is a pile of rubbish apps with very few exceptions.

Working with Chrome extensions and apps is pleasant enough in some ways – the JavaScript APIs are generally intuitive, and you can make native-feeling UIs without too much effort. However, the development experience feels a little bit dated and painful in places.

Konstantin Raev sent in Live Reloading Chrome Apps, an article about using Gulp with Chrome apps. It shows how live reloading isn’t as easy as it could be, and how to fix it. There’s also a full example on GitHub: bestander / clock-chrome-app-livereload-example.

Creating Chrome Extensions with React

Brandon Tilley sent in Creating Chrome Extensions with React:

If you’re into client-side web development to any extent, you’ve probably heard of Facebook’s React library. I was working on a Chrome extension, and decided to see how well React fit in to the development I was doing.

He also uses Browserify as well, which I’m interested in because I tried using RequireJS for sharing code between Chrome extensions and Firefox add-ons, and I struggled to get it to work in Firefox. My Firefox add-ons are using the Jetpack SDK rather than the old XUL way.

Passing data around in Chrome extensions

Passing data around in Chrome extensions by Erica Salvaneschi is an introduction to using chrome.runtime.sendMessage and addListener:

We wanted to get data from the current web page and then use it to populate a form that appears in a new window. It was easy to create a context menu item that triggered an event, but sending data based on the current page to the new window wasn’t obvious.

You might find this useful if you’re just getting into Chrome extensions and want more concrete examples than what Google provides.