每月档案: 2014年11月

在Firefox扩展中使用Web 工人

Web 工人允许您在诸如Firefox之类的浏览器中在后台运行代码。这是将其构建到Firefox扩展中的方法,这与在页面上正常创建一个扩展略有不同。这样做的文档基本上不存在,所以希望您’ll find 这个 useful.

请确保您具有与开发环境相似的开发环境 在我以前的帖子中描述过。

工人如何工作?

  • / 数据 /中的工作程序未直接连接到/ LIB /中的脚本
  • 但是,他们可以通过相互发送消息进行通信
  • 这些消息仅是文本,因此可以包含序列化的JSON,但仅此而已
  • 您’下面会注意到,我们基本上只是在两个脚本之间添加消息

工人的代码

导航到/ 数据 /目录并创建一个名为hello_world.js的文件

现在在其中粘贴以下内容(vim的新用户,请按 i开始输入和 退出跟着 :q保存):

这就是说,只要工作人员从客户端收到一条消息,然后将消息发送回“Hello” prepended.

这里的一个注意事项:在工人中,您可以’使用有用的功能  安慰.日志(“信息”)而不是使用  倾倒(“信息”)

让’从主代码中调用工人

让’导航回到 /LIB/文件夹并编辑 主要.js文件,这是在扩展程序中运行的第一件事。

粘贴以下代码:

然后跑  cfx  . 您’会发现一个混乱的错误:

啊哈!这里的关键是:  ReferenceError: 工人 定义的一种 。这是因为Firefox扩展程序改用了ChromeWorker。我们需要将其粘贴在main.js中,方法是将其粘贴在顶部:

并将引用hello_world.js文件的行更改为调用ChromeWorker:

好吧让’尝试再次运行它!试试看  cfx 一种 。 WTF另一个错误?

这里的关键是:  格式错误 脚本 URI: 你好,世界.js 。此隐秘错误是因为Firefox可以’尚未访问 /数据/文件夹。我们必须使用SDK的另一部分来启用对其的访问。

打开 主要.js并将其放在顶部:

现在我们可以使用该功能 .数据.网址()一种 。当您将文件名作为第一个参数时,它将返回一个字符串,例如  资源://jid1-zmowxggdley0aa-at-jetpack/test/data/whatever_file.jsÂ在扩展名的情况下正确引用它。修改工作程序导入行,如下所示:

现在让’使用以下命令再次运行扩展程序 cfx A :

是的,它有效!工人退回了消息“你好 马修“.

常问问题

  • 这是什么 {符号}是什么意思?

它的简写为:

基本上,这意味着  要求(“铬”)返回一个对象,我们只需要键引用的值“ChromeWorker”。这是从JavaScript对象中提取内容的非常简洁的方法,将来会派上用场。

  • 为什么现在将Worker称为ChromeWorker?我们在用Google Chrome做些什么吗?

这是一个命名巧合,与浏览器中的Chrome无关。在这种情况下,Chrome指的是Firefox插件内部。

设置Firefox扩展的开发环境。

这是我用来创建简单的Firefox扩展的方法。本教程是t的前身他的下一篇关于使用Web 工作人员 (即允许代码在后台线程上运行)。

搭建环境

We’将需要Firefox插件SDK。这是python文件的集合,可让您运行测试版(可选为空白)的Firefox。要下载它:

现在解压缩并删除压缩包:

转到目录并启动特殊的shell:

现在您可以看到该外壳已经在提示的括号中添加了(addon-sdk-1.17)。这意味着该窗口可能是文本的一半,因此我们可以使用以下命令来减少该文本:

干净得多! ðŸ™,

设置扩展模板

现在我们有了这个特殊的addon-sdk shell,导航回到您的文档并为我们的扩展程序创建一个新文件夹。

这个特殊的shell包含各种有用的命令,它们看起来都像  cfx y一种 。有关他们的更多信息,请参见 这里。在这种情况下,我们使用  cfx 在里面

让’检查创建的内容:

  •  LIB包含一个名为 主要.js这是所有扩展代码的主要处理程序文件
  • 数据是空的,但可用于存储工作程序(稍后再介绍)或大型数据文件之类的内容
  • 测试可以包含单元测试(很难设置,但对以后的测试驱动开发很有用)
  • .json包含有关扩展名的元数据–版本号,创建者名称,描述,许可等

您可以开始在main.js中编写代码,它将在浏览器中运行。完成后,使用  cfx 要测试!

请参阅下一个教程,了解如何使用网络工作者编写firefox扩展!