gpt4 book ai didi

javascript - 如何使用 angularjs 开发 firefox 插件

转载 作者:数据小太阳 更新时间:2023-10-29 04:13:40 26 4
gpt4 key购买 nike

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

目前 ui 是基于 jquery 的,我更喜欢 angularjs 并且想要在 angularjs 中使用我的 ui。

我读过 article关于使用 angularjs 开发插件。

Angular firefox addon .

我找不到更多文章或如何撰写文章。我想知道这是否真的可能,我该怎么做。

最佳答案

将第三方脚本添加到您的 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com