我想开发一个 firefox 插件，它具有额外完整窗口的所有控件，我称之为插件窗口。
目前 ui 是基于 jquery 的，我更喜欢 angularjs 并且想要在 angularjs 中使用我的 ui。
我读过 article关于使用 angularjs 开发插件。
我找不到更多文章或如何撰写文章。我想知道这是否真的可能，我该怎么做。
最佳答案
将第三方脚本添加到您的 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
由于您的项目“插件窗口”被假定为侧面板，因此您需要定义一个面板。
在 ./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或插件 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!';
}]);
希望这个回答对你的开发有所帮助。
关于javascript - 如何使用 angularjs 开发 firefox 插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24607396/