火狐扩展Firefox extension开发流程（学习记录）

最新推荐文章于 2025-06-24 16:29:08 发布

无·法

最新推荐文章于 2025-06-24 16:29:08 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/sysdzw/article/details/87872115

作者分享了自己因技术迭代，从XULoverlay到WebExtensionsAPIs，更新Firefox扩展fillforms的经历。详细介绍了WebExtensionsAPIs的目录及文档结构，强调了编码规则及扩展操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写的一个Firefox扩展fillforms由于使用的旧技术XUL overlay，被火狐停止使用了。话说火狐扩展开发方式变了好几次了。XUL/XPCOM overlays、bootstrapped extensions 、Add-on SDK，现在推WebExtensions APIs，把之前的都废弃了，说以后都是WebExtensions APIs，是为了和其他浏览器统一，为一个浏览器写扩展，个个浏览器都能用。

看到邮箱隔三差五的收到世界各地各种语言的求更新邮件感觉再不更新有点不负责任的意思了，一直计划把fillforms用新技术重写下然后提交更新，可迟迟未付诸行动，技术换了一代又一代，最近抽时间看了下WebExtensions APIs，下决心要着手了。

首先官方文档入口：https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions，比十年前条件好多了，都有中文文档了，之前都是英文看的头疼。各种资料到处搜，而且还基本百度不到，实在不会的就到官方论坛用蹩脚英文问老外。

扩展编写主要分这几项

一、目录结构

扩展目录名/
    icons/
        border-48.png
    borderify.js
    manifest.json

二、文档结构

manifest.json参考：

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ],

  "applications": {
    "gecko": {
      "id": "borderify@example.com"
    }
  },

  "icons": {
    "48": "icons/border-48.png",
    "96": "icons/border-96.png"
  }

}

js文件内容根据自己需要实现的功能开发，这里才是最重点的内容，在此你可以实现各项功能，改变页面样式内容等等。

三、按规则编码开发

改变网页元素浏览器界面等等。具体的我直接复制开发者文档的目录好了，对应的内容自己去看，有很多项，需要用到的仔细阅读那一块好了。