Menu
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.
909
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.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
