DailyJS

DailyJS

The JavaScript blog.


Tagextensions
Featured

chrome extensions browsers

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

Posted on .

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.

Featured

plugins backbone.js extensions fonts

Gbone.js, Writing Browser Extensions, Font.js

Posted on .

Gbone.js

Gbone.js (License: MIT) by Gobhi Theivendran is a framework built on top of Backbone.js for building mobile applications, inspired by Spine Mobile. It contains several classes that extend Backbone's classes to make it easier to build mobile applications. For example, Gbone.Stage contains multiple Gbone.Panels, and the panels are managed internally by a panel manager. They have a default skeleton like this:

<div class="container">  
  <header></header>
  <article></article>
</div>  

Panels can be activated and deactivated, animated using a transition. Only one stage and panel can be active at one time, so the end result is similar to native Android and iOS interfaces.

There's a Gbone.js demo app, which is a rewrite of currency.io. Gbone.js works with both jQuery and Zepto.

Writing Browser Extensions - Comparing Firefox, Chrome and Opera

Writing Browser Extensions - Comparing Firefox, Chrome and Opera by Parashuram Narasimhan explores writing a browser extension for multiple browsers. The author covers a lot of topics, including manifest files, background processes, message passing, and debugging.

This tutorial is based on Parashuram's experiences writing the MediaPlus, so some of the coverage is specific to that, but it's general enough to get a good overview of how difficult it is to support all of the major browsers with a single extension.

Font.js

Font.js (GitHub: Pomax / Font.js, License: MIT) by Mike Kamermans is a font API for client-side JavaScript. Fonts can be loaded on demand, and an onload callback will run once the font has been loaded:

var font = new Font();

font.onload = function() {  
  // The new font has loaded
};

font.src = 'http://example.com/font.ttf';  

Metrics for a font can be accessed. For example, font.metrics.leading will give the line height.

Featured

mac node modules extensions

Node Roundup: TermKit, service.js, Writing Node Extensions

Posted on .

TermKit

TermKit (License) by Steven Wittens is a "next gen" command-line interface. It currently
runs on Mac OS X, and is written using Node and Objective-C. I feel like
it's closer to something like Quicksilver
than a typical terminal client -- but it may shape up to be something
pretty compelling for general use.

When I first saw TermKit I thought Steven had used some kind of
incredible Node/Cocoa library, but it's actually a clever mix of Node
and WebKit. This seems like a good way to build native-feeling Mac apps
with Node, in a similar way to how WebKit Inspector is built.

The most interesting thing about this project is it attempts to build on
some of the conventions of terminal emulators, but explores embedding
GUI concepts into the terminal -- code is displayed with syntax
highlighting, and images are previewed automatically. Although it's
early stages for this project there are some extremely encouraging ideas
on display.

service.js

service.js by Cal Henderson builds on daemon.node (npm:
daemon) to provide an easy way of turning Node scripts into init.d daemons:

#!/usr/local/bin/node

require('service').run({
    lockFile: '/var/run/my_app.pid',
    logFile : '/var/log/my_app.log',
});

This preamble sets up the necessary requirements for the script to
function as an init script.

Writing Node Extensions

In How to write your own native Node.js
extension
,
Olivier Lalonde explains the steps necessary to use
libnotifymm.h from Node.

Writing a native Node extension can be cumbersome and verbose at times but it is well worth the hard earned bragging rights!

It'll take a bit of C++ and waf
knowledge to really appreciate what's going on, but it does demonstrate
that writing extensions for native libraries is within the reaches of
mere mortals (rather than wizards).