Exporting/Packaging Firefox add-on to web extension xpi

Question

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 certain 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!

Answer 1

SO user makyen has given his thoughts and ideas of making this extension to test upto my standards. Posting those here as an answer is to make it as a guide to other beginner developers to overcome my question.

Following changes were done:

new settings for 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"
    ]
}

I removed install.rdf as web extension don't need one. When it comes to packing the extension, Follow this guide . More info can be found here .

After that simply change file extension from filename.zip to filename.xpi to distribute.

Happy coding everyone.!