Exporting/Packaging Firefox add-on to web extension xpi

Hi, I’m recently looking into Firefox web extension development and I have no prior extension development skills therefore, accept my apologies in advance if this is a silly question.

I have developed an extension to manipulate certain elements in a domain. It works great in Firefox about:debugging environment. I’ve only used jQuery and Javascript to manipulate my settings on DOM. No SDK or XUL has been used. storage.local and browser tabs API used to store & transfer my data.

My questions are how to export this source code to test amongst few friends to verify functionality before signed by AMO and my approach in here is right or wrong.

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>

Directory Structure

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

Appreciate your thoughts in advance.

Cheers!

Update:
Stackoverflow user has been helpful to make these files into .xpi and it successfully loaded under about:debugging section.

Should i submit these files to AMO and get my files signed or is there any other way to temporary install unsigned .xpi files to test? Trying to install via about:addons throws me This add-on could not be installed because it appears to be corrupt. error message.

A couple of things:

  • You don’t need a install.rdf file. Those are used for legacy extensions. You only need the manifest.json.

  • It’s better to use the minified version of jquery since AMO will probably have a hash for that (so that file can be skipped during review).

This add-on could not be installed because it appears to be corrupt

  • I think you need to add an ID in your manifest.json
  • Also you should probably use the developer edition or nightly and turn off signing xpinstall.signatures.required