Thêm tập lệnh của bên thứ ba vào dự án Mozilla Addon SDK của bạn khá dễ dàng. Cài đặt ưu tiên sẽ là sử dụng JPM cùng với bower.
Giả sử bạn có NodeJS và Mozilla Firefox được cài đặt trên hệ thống dựa trên Unix, bạn sẽ muốn tạo một dự án mới với JPM.
mkdir my-addon
cd my-addon
jpm init
bower init
Bạn sẽ cần thêm tệp .bowerrc vào thư mục gốc của dự án với chi tiết sau đây. Tệp cấu hình gốc này chỉ thị cho nơi biên dịch các thành phần.
{
"directory": "data"
}
Bây giờ bạn có thể tiến hành cài đặt của bên thứ ba thư viện JavaScript của bạn như AngularJS
bower install --save angular
Các tập tin cấu trúc sẽ giống như dưới đây;
my-addon/
data/
angular/
angular.js
addon-window.js
addon-window.html
index.js
bower.json
project.json
Vì dự án "cửa sổ bổ trợ" được giả định là bảng điều khiển bên cạnh, bạn sẽ cần xác định bảng.
Trong ./index.js mã sau sẽ tạo panel cho dự án của bạn.
var data = require("sdk/self").data;
var addonWindow = require("sdk/panel").Panel({
contentURL: data.url("addon-window.html")
});
bên ./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>
bên ./data/addon-window.js:
var app = angular.module('addonWindow', ['ng']);
app.controller('MainCtrl', ['$scope', function($scope){
$scope.helloWorld = 'Greetings from AngularJS!';
}]);
Để chạy addon của bạn;
jpm run
Bây giờ nó tùy thuộc vào bạn để giao tiếp với kịch bản của bạn khô héo dù postMessage hoặc Addon SDK port API.
Điều này có thể hiệu quả.
bên ./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');
bên ./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!';
}]);
Tôi hy vọng câu trả lời này sẽ giúp bạn phát triển.
Bạn làm cách nào với điều này? Câu trả lời có giúp ích không? – halfcube