火狐(firefox)浏览器插件开发简明教程

手头有一个抓取页面数据的小项目，之前一直使用 Bookmarklet 书签脚本的方式来实现的。最近发现不能用了，因为涉及到要在抓取页面插入远程 JS 脚本，触发了最新浏览器的内容保护策略(Content Security Policy)。无奈之下，只能寻找其他的替代方法，尝试了一下，发现只能用浏览器扩展的方式来实现了。

一个极简的插件

一个最简单的火狐插件只需要两个文件： 插件说明文件和脚本文件。

说明文件是插件的入口，内容为 JSON 格式，对插件进行了一些说明和配置。命名必须为 manifest.json。一个简单的示例如下:

{
  "manifest_version": 2,
  "name": "MyFirefoxPlugin",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.zzxworld.com/*"],
      "js": ["app.js"]
    }
  ]
}

content_scripts 配置项指明了扩展要加载的 JS 脚本和扩展适配的网址，位置相对于当前目录。脚本内容就是常规的 javascript 代码，比如：

document.body.style.border = "5px solid red";

插件界面类型

插件界面常用的有三种。一种是弹窗，比如点工具栏按钮弹出一个弹出窗口，但这个弹出窗口不能失去焦点，否则就会消失，需要重新点击。这不太适用于我的采集功能，因为我有无法识别的数据需要从页面复制的操作流程。所以我采用了第二种：侧边栏。这个侧边栏是跟收藏夹在一起的，因为不会自动关闭，所以在脚本代码中需要添加标签页切换事件的支持。第三种就是独立的插件 tab 页面了，这个适合复杂的大型扩展，暂时没有研究。

插件消息机制

网页是由 HTML + CSS 构建的，插件也是，问题来了：如何获取网页的内容传递给插件脚本，然后在插件界面现实呢？火狐的提供了插件的消息机制。在获取页面内容的脚本中使用 browser.runtime.sendMessage() 方法发起消息。然后在插件界面脚本中用 browser.runtime.onMessage.addListener() 方法来监听捕获消息。以此来实现页面脚本和插件界面脚本的消息通讯。

打包和安装

火狐提供了 web-ext 工具来辅助生成打包文件，但依赖 node，操作使用有点繁琐。在 Linux 系统，可以使用 zip 命令。命令格式如下：

zip -r ../my-firefox-plugin.xpi *

以上命令在项目根目录执行就行了，完成后就会在上一级目录生成 my-firefox-plugin.xpi 文件，这个就是生成好的插件文件。但并不能直接使用。如果在火狐浏览器插件管理页面用文件导入的方式安装，得到的会是“文件损坏，无法安装”的消息。网上查到的消息是使用 about:config 打开浏览器高级配置，然后配置 xpinstall.signatures.required 为 false 就能解决。我实际操作后仍然无效。最终的解决方案是到 https://addons.mozilla.org/ 网站注册账号，上传生成的插件文件，通过审核并生成签名后才能正常安装。

插件开发调试

插件开发期间会不断的修改和调整代码。如果每次修改后都要打包才能测试那就太浪费时间了。在火狐中可以使用 about:debuging，然后通过“临时载入组建”的方式来实现快速的代码重载和功能测试。