Capella NPM | npm.io

Capella: a cross-browser extension framework

Capella is a work in progress!

capella logo

Capella is a cross-browser extension framework. Up to now it supports chrome, opera and firefox.

How it works:

If you deal with cross-browser extension development, you have to address two main issues:

Every browser has its own API
Every browser has its own mechanism to import/include files to your extension

So this is how Capella deals with the issues:

Capella has a cross-browser API that hides the different browser APIs.
All browsers have a thing in common: they have a persistent background script and contents script which run in the web pages. Capella has a preprocessor which is able to include files (.html or .js) to scripts. So you can include jquery by writing INCLUDE(jquery.min.js) in your content script, and that will copy the content of jquery.min.js to your content script. By using the import mechanism you can use every library you want!

How to install Capella:

Install node.js with npm
Install google chrome if you want to develop chrome extensions
Open command shell
Run npm install -g jpm to install build tool for firefox addons
Run npm install -g capella to install capella

Capella project structure:

my-extension/
    +-- manifest.json
    +-- data/
        +-- js/
        +-- css/
        +-- html/
        +-- ...
    +-- build/
        +-- my-extension-chrome/
        +-- my-extension-firefox/

In your main directory, there is the chrome-style manifest descriping your extension and the data folder containing all resources. Run capella build in your main directory to build your extension. The build output is copied to the build directory.

Capella commands:

capella init: create an (nearly) empty but valid example extension
capella build {target}: run this command in the main directory (where manifest.json is situated). Creates extension for target browser (chrome or firefox) or both if target is not specified. The output is saved to directory build

Preprocessor commands:

INCLUDE(myscript.js): Replaces the include command with the content of the specified files
INCLUDE_AS_STRING(myfile.html): Includes the content of the file as a string. Example: var popup = INCLUDE_AS_STRING(mypopup.html);