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

tech2022-12-18  102

手头有一个抓取页面数据的小项目,之前一直使用 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,然后通过“临时载入组建”的方式来实现快速的代码重载和功能测试。

最新回复(0)