nelix

var React = require('react');

var KeyMixin = require('./');

var Example = module.exports = React.createClass({
  displayName: 'KeyMixinExample',
  mixins: [KeyMixin],

  statics: {
    hotKeys: [

nelix

var EventListener = require('react/lib/EventListener');
var SyntheticMouseEvent = require('react/lib/SyntheticMouseEvent');

var documentListener;
var handlers = [];

const mouseEvent = 'mousemove';

function handle(nativeEvent) {
  var event = SyntheticMouseEvent.getPooled({}, mouseEvent, nativeEvent);

nelix

/**
 * @jsx React.DOM
 */

var React = require('react/addons');

var getIcon = function(name) {
  return require('./icons/' + name.toLowerCase(name) + '.svg');
};

nelix

var EventSystem = (function() {
  var self = this;

  self.queue = {};

  return {
    publish: function (event, data) {
      var queue = self.queue[event];

      if (typeof queue === 'undefined') {

nelix

Keybase proof

I hereby claim:

• I am nelix on github.
• I am ncreen_same (https://keybase.io/ncreen_same) on keybase.
• I have a public key whose fingerprint is C071 DCEE 1630 E1CC E46E 9766 E72D BA3B FCAD C852

To claim this, I am signing this object:

nelix

#Introduction

Developing Chrome Extensions is REALLY fun if you are a Front End engineer. If you, however, struggle with visualizing the architecture of an application, then developing a Chrome Extension is going to bite your butt multiple times due the amount of excessive components the extension works with. Here are some pointers in how to start, what problems I encounter and how to avoid them.

Note: I'm not covering chrome package apps, which although similar, work in a different way. I also won't cover the page options api neither the new brand event pages. What I explain covers most basic chrome applications and should be enough to get you started.

Table of Contents

1. Understand the Chrome Architecture
2. Understand the Tabs-Extension Relationship
3. Picking the right interface for the job

nelix

./~/rrouter/lib/createView.js
Module parse failed: /Users/nathanhutchison/stack-experiments/stackchat/node_modules/rrouter/lib/createView.js Line 32: Unexpected token ,
You may need an appropriate loader to handle this file type.
|   }
| 
|   return {views, props};
| }
| 
 @ ./~/jsx-loader?harmony!./~/rrouter/lib/index.js 7:26-49

nelix

var EmbedlyComponent = React.createClass({
  componentWillMount: function() {
    // get 'http://api.embed.ly/1/oembed?url=' + this.props.url;
    SuperAgent.get('http://api.embed.ly/1/oembed?url=' + this.props.url,
      function(res) {
        var data = res.body;
        if (data) this.setState(data);
      }.bind(this)
    );
  },

nelix

    handleTagChange: function(tags) {
      var tagCollection = this.props.tagCollection;
      var taskModel = this.props.model;

      function storeTags() {
        if (taskModel.isNew()) {
          taskModel.set({tag_ids: ids});
        } else {
          taskModel.save({tag_ids: ids}, {patch: true});
        }

nelix

function captureVisibleTab() {
  var win = require("window-utils").windowIterator().next(); // the actual firefox chrome (not the browser chrome.. the firefox concept)
  var {Cc, Ci} = require("chrome");

  // the... active window...
  var mainWindow = win.QueryInterface(Ci.nsIInterfaceRequestor)
                       .getInterface(Ci.nsIWebNavigation)
                       .QueryInterface(Ci.nsIDocShellTreeItem)
                       .rootTreeItem
                       .QueryInterface(Ci.nsIInterfaceRequestor)