Блог

Главная - Вопросы по программированию - Как разработать firefox addon с использованием angularjs

Как разработать firefox addon с использованием angularjs

#javascript #jquery #angularjs #firefox #firefox-addon

#javascript #jquery #angularjs #firefox #firefox-дополнение

Вопрос:

Я хочу разработать дополнение для Firefox, в котором есть все элементы управления в дополнительном полном окне, которое я называю addon window.

В настоящее время пользовательский интерфейс основан на jquery, и мне гораздо удобнее в angularjs, и я хотел бы иметь свой пользовательский интерфейс в angularjs.

Я прочитал статью о разработке дополнения с использованием angularjs.

Угловое дополнение для firefox.

Я не смог найти больше статей или инструкцию к статье. Интересно, возможно ли это на самом деле и как мне это сделать.

Комментарии:

1. Как у вас с этим обстоят дела? Помог ли ответ?

Ответ №1:

Добавить сторонний скрипт в ваш проект Mozilla Addon SDK довольно просто. Предпочтительной настройкой было бы использовать JPM вместе с bower.

Предположим, у вас установлены NodeJS и Mozilla Firefox в системе на базе unix, вы захотите создать новый проект с помощью JPM.

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

Вам нужно будет добавить .bowerrc файл в корневой каталог проекта со следующей детализацией. Этот корневой файл конфигурации указывает bower, где компилировать компоненты. 

 {
  "directory": "data"
}

Теперь вы можете приступить к установке сторонних библиотек JavaScript, таких как AngularJS

 bower install --save angular

Структура файла будет выглядеть следующим образом;

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

Поскольку предполагается, что «окно дополнения» вашего проекта представляет собой боковую панель, вам нужно будет определить панель.

В ./index.js следующем коде будет создана панель для вашего проекта.

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

внутри ./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>

внутри ./data/addon-window.js :

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

Для запуска вашего дополнения;

 jpm run

Теперь вам решать, как взаимодействовать с вашим скриптом wither через postMessage API порта Addon SDK.

Это может сработать.

внутри ./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');

внутри ./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!';
}]);

Я надеюсь, что этот ответ поможет вам в разработке.