Exporting/Packaging Web 扩展 xpi 的 Firefox 附加组件

Exporting/Packaging Firefox add-on to web extension xpi

我最近正在研究 Firefox 网络扩展开发,我之前没有扩展开发技能,因此,如果这是一个愚蠢的问题,请提前接受我的道歉。

我开发了一个扩展来操作特定域中的特定元素。它在 Firefox about:debugging 环境中运行良好。我只使用 jQuery 和 Javascript 来操作我在 DOM 上的设置。未使用 SDK 或 XUL。 storage.localbrowser tabs API 用于存储和传输我的数据。

我的问题是如何导出此源代码以在几个朋友之间进行测试以在 AMO 签名之前验证功能,我在这里的方法是对还是错。

manifest.json

{
    "content_scripts": [
        {
            "matches": [
                "*://*.domain.com/*"
            ], 
            "run_at": "document_start", 
            "js": [
                "jquery.js", 
                "flat_ui_min.js", 
                "application.js"
            ]
        }
    ], 
    "name": "Extension name goes here", 
    "icons": {
        "48": "icons/extension-icon-48.png"
    }, 
    "description": "Sample description goes here", 
    "homepage_url": "URL to the extension info", 
    "version": "1.2", 
    "manifest_version": 2, 
    "browser_action": {
        "default_icon": {
            "32": "icons/browser-icon-32.png"
        }, 
        "browser_style": true, 
        "default_title": "Extension short name", 
        "default_popup": "popup/layout.html"
    }, 
    "permissions": [
        "activeTab", 
        "storage", 
        "tabs"
    ]
}

install.rdf

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">

    <em:id>name@domain.org</em:id>

    <em:type>2</em:type>

    <em:name>Extension name</em:name>

    <em:version>1.2</em:version>

    <em:description>Extension description</em:description>

    <em:creator>Creator's name</em:creator>

    <em:homepageURL>Extension homepage</em:homepageURL>

    <em:optionsType>1</em:optionsType>

    <em:targetApplication>
      <Description>
        <em:id>Some random string</em:id>
        <em:minVersion>46.0</em:minVersion>
        <em:maxVersion>57.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

目录结构

Extension Folder
    └─── install.rdf
    └─── manifest.json
    └─── jquery.js
    └─── application.js
    └─── flat_ui_min.js
    └─── popup/
            └─── css/
                  └─── bootstrap.min.css
                  └─── flat-ui.min.css
                  └─── style.css
            └─── fonts/
                  └─── glyphicons/
                  └─── lato/
            └─── layout.html
    └─── icons/
            └─── browser-icon-32.png
            └─── browser-icon-48.png

提前感谢您的想法。

干杯!

SO 用户 makyen 给出了他制作此扩展以测试我的标准的想法和想法。将这些作为答案张贴在这里是为了将其作为其他初学者开发人员解决我的问题的指南。

进行了以下更改:

manifest.json

的新设置
{
    "description": "brief intro about the extension",
    "manifest_version": 2,
    "version": "1.2",
    "name": "Extension name",
    "homepage_url": "Developer or extension website",
    "icons": {
        "32": "icons/browser-icon-32.png",
        "48": "icons/browser-icon-48.png",
        "96": "icons/browser-icon-96.png",
        "128": "icons/browser-icon-128.png"
    },    
    "content_scripts": [
        {
            "js": [
                "jquery.js",
                "flat_ui_min.js",
                "application.js"
            ],
            "matches": [
                "*://*.somedomain.com/*",
                "*://*.somedomain.org/*"
            ]
        }
    ],
    "browser_action": {
        "default_title": "Extension browser title",
        "default_popup": "popup/layout.html",
        "browser_style": true,
        "default_icon": {
            "32": "icons/browser-icon-32.png"
        }
    },
    "permissions": [
        "activeTab",
        "storage",
        "tabs"
    ]
}

我删除了 install.rdf,因为网络扩展不需要。在打包扩展时,请遵循此 . More info can be found here.

之后只需将文件扩展名从 filename.zip 更改为 filename.xpi 即可分发。

祝大家编码愉快!