Question

我想开发一个firefox插件，它在额外的完整窗口上有所有控件，我称之为插件窗口。

目前ui基于jquery，我在angularjs中感觉更舒服，并希望在angularjs中拥有我的ui。

我已经阅读了使用angularjs开发插件的article。

我找不到更多文章或文章。我想知道它是否真的可行，我该怎么做。

Answer 1

将第三方脚本添加到Mozilla Addon SDK项目中非常简单。首选设置是使用JPM和bower。

假设您在基于unix的系统上安装了NodeJS和Mozilla Firefox，您将需要使用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

作为您的项目＆＃34;插件窗口＆＃34;假设是侧面板，您需要定义一个面板。

在./index.js中，以下代码将为您的项目创建panel。

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

现在，您可以通过postMessage或Addon SDK port API与您的脚本进行通信。

这可能有效。

在./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!';
}]);

我希望这个答案有助于你的发展。

如何使用angularjs开发firefox插件

1 个答案: