raj*_*aju 8 javascript firefox jquery firefox-addon angularjs
我想开发一个firefox插件,它有额外完整窗口的所有控件,我称之为插件窗口.
目前ui基于jquery,我在angularjs中更舒服,并希望在angularjs中拥有我的ui.
我找不到更多的文章或如何文章.我想知道它是否真的可行,我该怎么做.
将第三方脚本添加到Mozilla Addon SDK项目中非常简单.首选设置是使用JPM和凉亭.
假设您在基于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下面的代码中将为您的项目创建一个面板.
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 端口 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!';
}]);
我希望这个答案可以帮助你发展.