How to develop firefox addon using angularjs

angularjs, firefox, firefox-addon, javascript, jquery

Solution

Adding third party script into your Mozilla Addon SDK project is rather easy. A preferred setup would be to use JPM along with bower.

Lets assume you have NodeJS and Mozilla Firefox installed on a unix based system, you will want to create a new project with JPM.

mkdir my-addon
cd my-addon
jpm init
bower init

You will need to add a `.bowerrc` file to the project root with the following detail. This root configuration file instructs bower where to compile the components.

{
  "directory": "data"
}

Now you can proceed to install your third-party JavaScript libraries such as AngularJS

bower install --save angular

The file structure will resemble the following;

my-addon/
     data/
          angular/
               angular.js
          addon-window.js
          addon-window.html
     index.js
     bower.json
     project.json

As your project "addon window" is assumed to be a side panel, you will need to define a panel.

In `./index.js` the following code will create a panel for your project.

var data = require("sdk/self").data;
var addonWindow = require("sdk/panel").Panel({
  contentURL: data.url("addon-window.html")
});

inside `./data/addon-window.html`:

<html ng-app>
  <head>
    <title>Addon Window</title>
    <script src="angular/angular.js">
    <script src="addon-window.js">
  </head>
  <body ng-controller="MainCtrl">
    {{helloWorld}}
  </body>
</html>

inside `./data/addon-window.js`:

var app = angular.module('addonWindow', ['ng']);
app.controller('MainCtrl', ['$scope', function($scope){
   $scope.helloWorld = 'Greetings from AngularJS!';
}]);

To run your addon;

jpm run

Now it up to you to communicate with your script wither though `postMessage` or Addon SDK port API.

This may work.

inside `./index.js`:

var data = require("sdk/self").data;
var addonWindow = require("sdk/panel").Panel({
  contentURL: data.url("addon-window.html")
});
addonWindow.port.emit('greeting', 'Addon SDK');

inside `./data/addon-window.js`:

var app = angular.module('addonWindow', ['ng']);
app.controller('MainCtrl', ['$scope', function($scope){
   self.port.on('greeting', function (message) { // Addon SDK API
     $scope.helloWorld = 'Greetings:' + message;
     $scope.$digest();
   });
   $scope.helloWorld = 'Greetings from AngularJS!';
}]);

I hope this answer helps you development.

Problem

I want to develop a firefox addon which has all the controls on extra complete window which I call addon window. Currently the ui is based on jquery and I am much more comfortable in angularjs and would want to have my ui in angularjs. I have read an article on developing addon using angularjs. Angular firefox addon. I couldn't find more articles or an how to article. I wonder if it is actually possible and how do I do it.

Original source